注意事项：

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. 文件处理： read、readline、 readlines（）

    假设a.txt的内容如下所示: Hello Welcome What is the fuck.. 1. read([size])方法 read([size])方法:从文件当前位置起读取size个字节, ...

  2. 小朋友的数字(codevs 3293)

    题目描述 Description 有n个小朋友排成一列.每个小朋友手上都有一个数字,这个数字可正可负.规定每个小朋友的特征值等于排在他前面(包括他本人)的小朋友中连续若干个(最少有一个)小朋友手上的数 ...

  3. 0213Zabbix通过percona监控MySQL

    因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用,业界的同学们都使用Percona Monitoring Plugins 监控 MySQL的方式 Percona介绍 P ...

  4. Stockbroker Grapevine POJ 1125 Floyd

    Stockbroker Grapevine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37069   Accepted: ...

  5. MQTT---HiveMQ源代码具体解释(一)概览

    源博客地址:http://blog.csdn.net/pipinet123 MQTT交流群:221405150 面向群体 想自己实现MQTT Broker的朋友 对现有开源的MQTT Broker或多 ...

  6. POJ_1679_The Unique MST(次小生成树模板)

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23942   Accepted: 8492 D ...

  7. python基础练习-猜年龄、编写登陆接口小程序

    python基础练习:   一.猜年龄 , 可以让用户最多猜三次! age=40 count = 1 while count <=3 : user_guess=int(input("i ...

  8. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  9. easyUI中的layout

    Layout 通过$.fn.layout.defaults能够重写Layout. layout是一个具有五个区域的容器.仅仅有中间区域面板是必须的,其余的都是边界面板.每个边界面板都能够通过拖动它的边 ...

  10. 浅析Netty原理