css:hover状态改变另一个元素样式的使用

最新推荐文章于 2023-06-28 14:19:25 发布
最新推荐文章于 2023-06-28 14:19:25 发布
阅读量261 收藏
点赞数 1
原文链接：http://www.cnblogs.com/yuanyuan-1994/p/8856254.html
版权

css:hover状态改变另一个元素样式的使用

：当hover的元素和需要改变样式的元素是父子关系的时候，可以这么写.father:hover .son{加上需要改变你的元素}

此时是hover  div1容器，改变div2框的背景颜色，但发现div1和div2不是父子关系而是兄弟关系，这时候这样写（.div1:hover  .div2{background: #000;}）不起效果。应该的写法是（.div1:hover +.div2{background:#f00;}）

 

 

转载于:https://www.cnblogs.com/yuanyuan-1994/p/8856254.html

weixin_30437847
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS hover 改变其他元素状态
weixin_44164982的博客
07-08 1743
在写网站的页面时，我发现很多网站都有展示企业的其他社交工作，例如下载APP的下载码，官方微信和微博等。这些图片的展示基本都是通过hover来实现的。 例如： hover改变其他元素状态，可以分为两种情况： 改变本身的子元素（最常见，好解决） 改变本身的兄弟元素（不常见） 我通过一个例子解释一下这两种情况 控制子元素时，我们直接用后代选择器 .class1{position: relative;margin-bottom: 200px;} .class1&...
CSS: hover选择器的使用详解
09-24
在CSS中，`:hover`选择器是一个非常实用的工具，它允许我们为用户鼠标悬停在元素上时改变该元素或其相关元素的样式。`:hover`选择器的使用不仅简化了JavaScript的交互逻辑，还能提升页面性能，因为它无需额外的...
关于hover改变其他元素
m0_48079732的博客
12-02 5988
A元素:hover 鼠标悬停在A元素时，改变A元素样式 A元素:hover B元素 鼠标悬停在A元素时，改变A元素的子元素B的样式 A元素:hover + B元素鼠标悬停在A元素时，改变与A相邻的兄弟元素B的样式（A必须与B 相邻） A元素:hover ~ B元素鼠标悬停在A元素时，改变A的指定兄弟元素B的样式表示（A B可以不相邻，但B必须在A元素之后。） .right:hover{ /*本身*/ transform: scale(1.05); z-inde...
vue+css中通过一个div的hover触发另一个的样式变化
weixin_42966151的博客
06-28 1281
原本。
Vue cli中点击子组件模块，改变父组件元素 (antd)
weixin_37778355的博客
07-10 1477
这个需求是在vue cli中有个导航栏，其中包含不同的控件，在操作下面子页面的时候，外层的导航栏要相应的变化，改变其中一个控件； 先说父组件里： <children style="display:inline" v-if="IfIcon"> //这个插槽不是必须的 把children换成普通的div也可以的，就不需要children这个子组件了 <a-icon :type="IconType" /> </children> 整个这个方法里有两个变量需要变化；
用CSS解决hover一个div，改变另外2个div的样式
阿牛哥的博客
10-14 4699
用CSS解决hover一个div，改变另外2个div的样式 在项目中遇到这样一个问题： div1和div3有默认的css样式 背景颜色是绿色 div2有一个默认的css样式 背景颜色是红色 需求：当鼠标悬浮在div1，div2，div3上时 让当前div的背景颜色变为红色，其余背景颜色变为绿色，无鼠标悬浮时 让其展示默认效果 <style> .div1 { width: 100px; height: 100px;
CSS :active 伪类 元素被激活时的样式
12-13
说明： 适用于一个元素被激活时的样式，例如鼠标在此元素的区域内按下但还没有释放时 客户端（浏览器）可以根据用户与其交互的动作改变其渲染效果，CSS为这种情况提供了三个伪类：hover、active、focus 上述三种伪类...
图片边框变换CSS Hover状态效果一例特效代码
03-20
在这个实例中，我们将讨论如何利用CSS实现一个图片边框变换的Hover状态效果。这个效果通常用于增加用户体验，使用户在鼠标悬停在图片上时能够感知到交互性。 在传统的网页设计中，为了实现类似的功能，开发者可能...
解决css中hover做遮盖罩闪动问题(推荐)
09-24
在CSS中，`hover`伪类是用于定义元素在鼠标悬停时的样式，而“遮盖罩”通常指的是一个半透明的层，用于覆盖在其他元素上方，以实现特定的交互效果，如按钮悬停时显示提示或者阻止底层元素交互。然而，在实现这种效果...
csshover.htc在IE7下使用:active伪类无效解决方法
09-25
`csshover.htc`的工作原理是通过JavaScript或VBScript在IE中注入CSS行为，使得元素在特定事件下能够改变样式。然而，在实际应用中，可能会遇到一些问题，比如在IE7下`:active`伪类无效的情况。这个问题通常是由于...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
weixin_39834745的博客
06-03 1591
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中，有时我们不能直接使用外部CSS样式控制DIV样式，比如对a设置a:hover样式。可以使用onMouseOver(鼠标移到目标上)和onMouseOut(鼠标移开目标后)实现对a标签或其它html标签设置hover样式。直接对标签使用即可，无论A标签、SPAN标签、DIV标签等均可。jb51 以上对a超链接代码设置默认...
css 设置div按下状态,css:hover状态改变另一个元素样式的使用
weixin_29129247的博客
08-04 1195
情景1：`Documentbody{margin: 0;padding: 0;}.container .ul li{width: 100px;height: 20px;background: #f00;margin-bottom: 10px;list-style: none;}.container{border: 1px solid #000;}.container:hover ul.ul>...
css hover同级,CSS hover改变子标签/同级标签样式
weixin_29001655的博客
08-03 1448
.second {display: none;}.first:hover+.second, .second:hover {display: block;}/*第一个div hover时，改变其子标签的颜色*/.first:hover .first-child {color: cyan;}/*第一个div hover时，改变第二个div标签的颜色*/.first:hover + .second {c...
CSS3多级联动菜单
weixin_40850915的博客
07-24 359
CSS3实现的多级联动菜单 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5 CSS3下拉导航菜单</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1e1e1e;
css中hover属性的使用技巧
热门推荐
anjx0228的博客
08-12 2万+
hover属性用不同的书写方式，来改变不同关系的元素样式。 元素:hover 表示聚焦后改变自己 元素:hover 元素 表示聚焦后改变其子元素 元素:hover + 元素 表示聚焦后改变其指定的“亲兄弟”（条件是该兄弟元素与其相邻）元素 元素:hover ~ 元素 表示聚焦后改变其指定的兄弟元素，两个元素相不相邻都行。 示例： .first:hover {color: white;}/* 聚焦我改变自己 */ .three:hover .three-son {font-size: 20px.
CSS:hover常见问题及用法
qq_54334713的博客
04-12 9536
目录 hover定义 hover用法 hover问题 后记 hover定义 :hover 选择器用于选择鼠标指针浮动在上面的元素 hover用法 控制自身样式 <div class="aa"></div> <style> aa:hover { background-color:yellow; } </style> 父元素控制子元素 <div class="parent"> <div cl
CSS实现某元素hover时 所有兄弟节点样式改变
weixin_33757609的博客
03-02 7574
2019独角兽企业重金招聘Python工程师标准>>> ...
css :hover 同级
最新发布
02-27
下面是一个示例，演示了如何使用:hover选择器来变同级元素的样式： HTML： ``` < class="item">Item 1 <div class="item">Item 2div> < class="item">Item 3 ``` CSS代码： ``` .item { background-color: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值