鼠标悬浮事件的hover的使用

鼠标悬浮事件hover的使用

用法1：

表示当鼠标悬浮在a元素上时，a元素的背景颜色变成粉色

 .a:hover{background-color: pink;}

用法2：

用a来控制其他元素

用a来控制a的子元素

<style>.a{width: 100px;height: 100px;border: 1px solid black;}.b{width: 50px;height: 50px;border: 1px solid red;}.a:hover{background-color: pink;}.a:hover .b{background-color: aqua;}
</style>
<body><div class="a"><div class="b"></div></div>
</body>
</html>

用a来控制其相邻的兄弟元素

<style>.a{width: 100px;height: 100px;border: 1px solid black;}.b{width: 50px;height: 50px;border: 1px solid red;}.c{width: 100px;height: 100px;border: 1px solid blue;}.a:hover +.c{background-color: aqua;}
</style>
<body><div class="a"><div class="b"></div></div><div class="c"></div> </body>
</html>

用a来控制其普通兄弟元素

<style>.a{width: 100px;height: 100px;border: 1px solid black;}.b{width: 50px;height: 50px;border: 1px solid red;}.c{width: 100px;height: 100px;border: 1px solid blue;}.d{width: 100px;height: 100px;border: 1px solid salmon;}.a:hover ~.d{background-color: pink;}
</style>
<body><div class="a"><div class="b"></div></div><div class="c"></div> <div class="d"></div>
</body>
</html>

总结：

空格就是控制其子元素
‘+‘，就是控制其相邻的兄弟元素
’~‘，就是控制其普通的兄弟元素

鼠标悬浮事件的hover的使用相关推荐

鼠标悬浮事件 -jQuery hover（）方法（layer.js）（layer.tips）
鼠标悬浮事件 -jQuery hover()方法代码: <!DOCTYPE html> <html lang="en"> <head><m ...
鼠标悬浮事件 -jQuery hover（）方法
body内容 <div class="title-01"><span class="name">机构账户统计</span>& ...
chrome调试鼠标悬浮事件(不是CSS:hover)
文章目录文章参考问题描述解决办法鼠标右键弹出菜单 ctrl+shift+c 文章参考 chrome浏览器如何审查鼠标移入事件? Chrome调试鼠标悬停后出现的元素 chrome模拟鼠标悬停调 ...
jQuery鼠标悬浮事件
今天学习了鼠标悬浮事件,跟小编来看看吧~ 先来看一下效果: 原本样式: 鼠标悬浮样式: 鼠标离开样式: 源码: <!DOCTYPE html> <html lang="en ...
arcgis for js图层graphic的鼠标悬浮事件
//仅供参考(与layui前端框架配合使用) $(function(){ createModelAllLayer(); wbgraphicsOnMouseOut(); }); /** * 用于轨迹鼠 ...
echart移上去显示内容_echarts 使用formatter 修改鼠标悬浮事件信息操作
formatter 一般用于格式化鼠标悬浮时间的信息,如果你的数据是JSON数组格式,那么不必和我这样一一判断扇形图的 ticket 值,使用 formatter 的 callback 时间即可自行对 ...
php $delaytime /= $delaytime,定时器之延时触发鼠标悬浮事件
定时器之延时触发鼠标悬浮事件 }.hoverDiv{width:100px;height:100px;margin:50px;background:#ECAD9E;border:3px solid # ...
JavaScript的DOM之鼠标悬浮事件
JS的DOM之鼠标悬浮事件鼠标悬浮事件之onmouseover()和onmouseout()事件这里用大白话介绍一下最简单的原理: 就是当鼠标在这块区域时候会触发相应事件,将鼠标挪开则恢复原先事件 ...
使用transform:scale之后导致页面鼠标悬浮事件消失
兼容pad设置transform缩放导致高德地图页面鼠标悬浮事件消失

鼠标悬浮事件的hover的使用

鼠标悬浮事件hover的使用

鼠标悬浮事件的hover的使用相关推荐

最新文章

热门文章