注意事项：

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .box {
  8.             width: 400px;
  9.             height: 300px;
  10.             border: 1px solid #ccc;
  11.             margin: 150px auto;
  12.             position: relative;
  13.         }
  14.  
  15.         .arrow {
  16.             display: none;
  17.         }
  18.  
  19.         span {
  20.             position: absolute;
  21.             top: 50%;
  22.             margin-top: -40px;
  23.             width: 30px;
  24.             height: 80px;
  25.             text-align: center;
  26.             line-height: 80px;
  27.             font-size: 40px;
  28.             background: rgba(255, 198, 93, 0.3);
  29.         }
  30.  
  31.         .left{
  32.             left: 0px;
  33.             border-radius: 0 10px 10px 0;
  34.         }
  35.         .right {
  36.             right: 0px;
  37.             border-radius: 10px 0 0 10px;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42. <div class="box">
  43.     <div class="arrow">
  44.         <span class="left">&lt;</span>
  45.         <span class="right">&gt;</span>
  46.     </div>
  47. </div>
  48. <script>
  49.     var divEle = document.getElementsByTagName("div")[0];
  50.     var arrEle = document.getElementsByTagName("div")[1];
  51.     divEle.onmouseover = function () {
  52.         arrEle.style.display = "block";
  53.     }
  54.     divEle.onmouseout = function () {
  55.         arrEle.style.display = "none";
  56.     }
  57.  
  58. </script>
  59. </body>
  60. </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. Spring 进行junit单元测试时，出现method ‘initializationError’ 错误

    首先检查一下所有的方法是否为public 然后看是否有commons-logging这个日志包

  2. windows开启3306端口并用可视化工具访问远程mysql(授权访问)

    开启 MySQL 的远程登陆帐号有两大步: 1.确定服务器上的防火墙没有阻止 3306 端口. MySQL 默认的端口是 3306 ,需要确定防火墙没有阻止 3306 端口,否则远程是无法通过 330 ...

  3. 1048 石子归并codevs

    1048 石子归并codevs 题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1 ...

  4. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  5. 极客标签互动课程系列　－　Javascript生成SVG动画素描特效

    课程描写叙述:在这个课程中,我们将介绍SVG.而且介绍怎样使用javascript来控制SVG生成素描动画效果 课程地址:http://www.gbtags.com/gb/gbliblist/21.h ...

  6. 删除windows服务 cygwin sshd

    $ cygrunsrv -R sshd     删除ssd服务

  7. Chrome控制台命令

    window.print();打印当前窗口内容或输出为pdf

  8. excel 字符串拼接 添加 超链接

    =HYPERLINK("http://"&C2,"http://"&C2)

  9. Excel 常用快捷键键 快捷方式

    移动整行的位置 Shift + Alt + 鼠标拖拽 不加Shit + Alt 移动后 留白 注意:需要移动鼠标到行的最上面,变成十字箭头

  10. 【总结】嵌入式linux内核中Makefile、Kconfig、.config的关系及增加开机Hello World【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/73772109 为了弄清内核的组织结构,我们先来实现下面这个简单的例子. 一.增加 ...