Question

有没有办法在聚焦或悬停在其中一个孩子身上时改变元素的css？

Ex：当我在A上移动鼠标时，B的背景颜色会发生变化。如果B是后代A，则有可能。

- 甲
-----乙

使用#A:hover #B { background-color: blue }

DEMO

兄弟姐妹：

---甲
---乙

是#A:hover ~ #B { background-color: blue; }

DEMO

假设B是A的后代 如果我想改变#A背景，我在徘徊在B.怎么可能呢？

- 甲
-----乙

Answer 1

目前，在纯CSS中执行此操作是不可能的......但是，据推测，即将推出的父选择器可以在这种情况下正常运行。点击here了解详情。

变通

与此同时，您还可以使用javascript和/或jquery轻松完成此任务。

DEMO

HTML

<div id="div1">
  div 1 area
  <p id="paragraph">
    This is paragraph
  </p>
</div>

CSS

#div1 {
  border:1px solid lightgray;
}
p {
  margin: 50px;
  background-color: lightblue;
  padding: 8px;
}

.altbg {
    background:grey;
}

的jQuery

$(function(){
    $('#paragraph').mouseenter(function(){
        $(this).parent().addClass('altbg')
    }).mouseout(function(){
        $(this).parent().removeClass('altbg')
    });
});

Answer 2

实际上在css中是可能的。有人做了这个小提琴： http://jsfiddle.net/u7tYE/

＆＃13;

#a:hover + #b {
        display:block;
        background-color:rgb(200,200,150);
    }
    #b{display:none;background-color:rgb(200,200,150;}

＆＃13;

<a id="a">Menu</a>
<div id="b">
<p>Home</p>
<p>About</p>
<p>Login</p>
</div>

＆＃13;

效果很好。

将鼠标悬停在css中的另一个元素上时更改元素css？

2 个答案:

变通