注意事项：

1、定位中left权重比right高，top权重比bottom高

2、两个span标签嵌套在一个盒子中，将来显示隐藏只需要控制父盒子就行了

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .box {

            width: 400px;

            height: 300px;

            border: 1px solid #ccc;

            margin: 150px auto;

            position: relative;

        }

        .arrow {

            display: none;

        }

        span {

            position: absolute;

            top: 50%;

            margin-top: -40px;

            width: 30px;

            height: 80px;

            text-align: center;

            line-height: 80px;

            font-size: 40px;

            background: rgba(255, 198, 93, 0.3);

        }

        .left{

            left: 0px;

            border-radius: 0 10px 10px 0;

        }

        .right {

            right: 0px;

            border-radius: 10px 0 0 10px;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="arrow">

        <span class="left">&lt;</span>

        <span class="right">&gt;</span>

    </div>

</div>

<script>

    var divEle = document.getElementsByTagName("div")[0];

    var arrEle = document.getElementsByTagName("div")[1];

    divEle.onmouseover = function () {

        arrEle.style.display = "block";

    }

    divEle.onmouseout = function () {

        arrEle.style.display = "none";

    }

</script>

</body>

</html>

CSS——轮播图中的箭头的更多相关文章

  1. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  2. 微信小程序之swiper轮播图中的图片自适应高度

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...

  3. css 纯css轮播图 示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  5. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  6. Bootstrap中手指控制轮播图切换

    通过手指的滑动来控制轮播图中的图片内容的切换 // 1. 获取手指在轮播图元素上的一个滑动方向(左右) // 获取界面上的轮播图容器 var $carousels = $('.carousel'); ...

  7. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  8. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  9. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

随机推荐

  1. 28、Java并发性和多线程-剖析同步器

    以下内容转自http://ifeve.com/anatomy-of-a-synchronizer/: 虽然许多同步器(如锁,信号量,阻塞队列等)功能上各不相同,但它们的内部设计上却差别不大.换句话说, ...

  2. 用JQuery实现选中select里面的option显示对应的div

    HTML: <select name=""  onchange="select(this)"> <option value="1&q ...

  3. golang 的GOPATH设置的问题

    go run footer.go 的时候呢, go会依次去GOPATH 和GOROOT设置的对应路径下面找对应的包(目录和文件) 找的时候呢, 会在GoPATH 和GOROOT对应的目录后面再加一层路 ...

  4. HR系统-人员申请单

    部门在人员缺失时,须要进行人员申请, 申请会涉及到单据的建立及审核.单据建立界面例如以下:

  5. Live555研究之中的一个 源码编译

                                                Live555研究之中的一个 源代码编译 Live555 是一个为流媒体提供解决方式的跨平台的C++开源项目,它 ...

  6. 【敬业福bug】支付宝五福卡敬业福太难求 被炒至200元

    016年央视春晚官方独家互动合作伙伴--支付宝,正式上线春晚红包玩法集福卡活动. 用户新加入10个支付宝好友,就可以获成3张福卡.剩下2张须要支付宝好友之间相互赠送.交换,终于集齐5张福卡就有机会平分 ...

  7. HDU4689Derangement (动态规划)

    题目链接:传送门 题意: 对于一个由1~n组成的长度为n的序列来说它有n!种排法.我们定义初始的排列为1,2,3,...,n对于兴许的排列假设a[i]>i则用'+'表示.a[i]<i用'- ...

  8. Dynamics CRM Microsoft SQL Server 指定的数据库具有更高的版本号

    在做NLB部署时遇到这么个问题,CRMAPP1安装的CRM版本号是6.1已经打了SP1补丁,而在CRMAPP2上的CRM安装包是6.0版本号.在选择连接现有部署后,最后一步检測就出了问题,例如以下图所 ...

  9. java学习笔记：eclipse的workspace和working set

    我将这二个东西搞混了. 看上去,workspace 类似于VS里的解决方案,而working set则像VS里的解决方案文件夹,是个逻辑概念. VS里的解决方案是个文件,而eclipse里的works ...

  10. BNU 13064 Dice (I) 前缀和优化DP

    Dice (I)   You have N dices; each of them has K faces numbered from 1 to K. Now you have arranged th ...