注意事项：

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. H5存储------localStorage和sessionStorage

    web现在随着计算机的高速发展,客户端干的事情越来越多了,随着事情的增多,很多东西存储就不止在服务器了,本地存储越来越强大了(大神原谅我废话了

  2. [bzoj3809]Gty的二逼妹子序列_莫队_分块

    Gty的二逼妹子序列 bzoj-3809 题目大意:给定一个n个正整数的序列,m次询问.每次询问一个区间$l_i$到$r_i$中,权值在$a_i$到$b_i$之间的数有多少个. 注释:$1\le n\ ...

  3. NOIP2012 提高组合集

    NOIP 2012 提高组 合集 D1 T1 Vigenère 密码 模拟题,观察到两个数对应位置-1相加的和%26就是对应的字母,按照这个性质模拟即可. #include <iostream& ...

  4. [BZOJ1045][HAOI2008]糖果传递（数学分析）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1045 分析:均分纸牌的环状版本. 先看线性的版本: 设f[i]表示第I位从第i+1位得 ...

  5. POJ 1260-Pearls（DP）

    Pearls Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7465   Accepted: 3695 Descriptio ...

  6. MDK链接脚本错误

    我想让我的程序运行在RAM中而不是在SPI FLASH上,写了一个scatterfile: ROM 0x00000000 0x00200000 ;spi flash{STARTUP +0 { star ...

  7. ubuntu16.04安装flash player

    ubuntu16.04安装flash player sudo apt-get install flashplugin-installer 1 2019: apt-get install browser ...

  8. iOS-获取子视图父控制器

    开发中有的时候需要涉及当前视图的父级视图,可以通过UIResponder来获取,有两种实现方式: UIView *next=sender; while ([next superview]) { nex ...

  9. 推荐微软Windows 8 Metro应用开发虚拟实验室

    Kevin Fan分享开发经验,记录开发点滴 推荐微软Windows 8 Metro应用开发虚拟实验室 2012-07-19 05:23 by jv9, 1940 阅读, 4 评论, 收藏, 编辑 微 ...

  10. [luogu_U15118]萨塔尼亚的期末考试

    https://zybuluo.com/ysner/note/1239615 题面 \(T\)次询问,求出\[\sum_{i=1}^n\frac{i}{\frac{n(n+1)}{2}}fib_i\] ...