CSS hover 改变其他元素状态

在写网站的页面时，我发现很多网站都有展示企业的其他社交工作，例如下载APP的下载码，官方微信和微博等。这些图片的展示基本都是通过hover来实现的。

例如：

hover改变其他元素状态，可以分为两种情况：

改变本身的子元素（最常见，好解决）
改变本身的兄弟元素（不常见）

我通过一个例子解释一下这两种情况

控制子元素时，我们直接用后代选择器

.class1{position: relative;margin-bottom: 200px;}
   .class1>.class2{position:absolute;top:30px;left:50px;width:100px;height: 100px;display: none;}
       .class1:hover .class2{ display:block; }
       .class1>div>img{width:100px;height: 100px;}

<div class="class1">关注我们
<div class="class2">
       <img src="code.png">
</div>

结果为：

控制兄弟元素时，要使用兄弟选择器，如果控制相邻元素，使用相邻元素选择器即可。

.class3{position: relative;}
       .class4{position:absolute;top:30px;left:50px;width:100px;height: 100px;display: none;}
       .class4>img{width:100px;height: 100px;}
       .class3:hover ~ .class4{display:block;} 使用兄弟选择器
<div class="class3">加入我们</div>
<div class="class4"><img src="download.png"></div>

结果为：

大家有兴趣可以尝试一下。

CSS hover 改变其他元素状态相关推荐

css:hover改变另一个元素的样式
css:hover状态改变另一个元素样式的使用效果演示情景一:两个是兄弟元素情景二:两个是父子元素情景二:两个是兄弟元素,改变的是一个兄弟元素的子元素附加代码: <!DOCTYPE h ...
css hover改变svg颜色
转自https://blog.csdn.net/qq_39785489/article/details/107781746 想要实现菜单前的icon(svg格式),根据hover改变svg颜色,并且默 ...
CSS hover改变原生时出现抖动解决方法
有时我们会通过hover改变元素展示状态或高宽度但这样可能会引发页面抖动的奇葩事首先分析原因 : 其实这是谷歌浏览器的BUG 当你改变内容时浏览器以为元素超出了,立刻展示出滚动条过一会儿又发现 ...
CSS hover改变背景图片过渡动画生硬
解决方案:将hover要改变的背景放到另一层,hover时改变该层的透明度. 比如: 如果你想: div{transition:.5s;} div:hover{background:url(img); ...
css hover, focus 状态改变其他元素样式
A:hover { 改变 B 的样式 }, 这样效果就不需要用到javascript. 这个就是css选择器的使用情况了,假设悬浮元素是a,样式改变元素是b,俩个元素之间的关系就是b是a的子元素就可以 ...
CSS中hover改变其他元素样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
CSS :hover选择器
最近的工作内容是东家的一个在线网站,会用到大量CSS做页面的样式,刚好复习下CSS基础,在这里记录一下,希望也能帮助到前端er. 在实践中,对于页面动效,总体思路就是能用css解决的就绝不写js,这样 ...
CSS:hover常见问题及用法
目录 hover定义 hover用法 hover问题后记 hover定义 :hover 选择器用于选择鼠标指针浮动在上面的元素 hover用法控制自身样式 <div class=" ...

CSS hover 改变其他元素状态

CSS hover 改变其他元素状态相关推荐

最新文章

热门文章