hover一个元素时，能否改变父元素的状态

Question

<div class="b" style="background-color:red">
<img src="..."  class="a">
</div>

鼠标悬停在img标签上是修改div的背景颜色用hover怎么写
不能使用js，只能用css来写，是否能够实现？

Answer 1

不可以。你想改变父元素的背景，就直接给父元素加hover就是了呗。

Answer 2

给div加hover咯

Answer 3

父元素现在没法选

Answer 4

不能选父元素，不过你可以再给img设置一个与父元素相同大小和位置的子元素，然后修改子元素的背景色。。。

Answer 5

不可以，用dom操作节点才行

Answer 6

事件存在冒泡。

Answer 7

js中支持事件冒泡，给父div注册hover事件就行，不用js的话就要给父div加上hover属性了

Answer 8

同级元素是可以的，用+选择器，要不题主想办法改成同级？

Answer 9

<style type="text/css">
.b{background-color: red;}
.b:hover{background-color: yellow;}
</style>
<div class="b">
<img src="..."  class="a">
</div>

Answer 10

<style type="text/css">
.b{background-color: red;}
.b > img:hover .b{background-color: yellow;}
</style>
<div class="b">
<img src="..." class="a">
</div>

Answer 11

不可以，css没逆向的写法

Answer 12

不可以,不能直接在父级上使用hover吗? 如果必须修改父级, 建议使用js

Answer 13

目前还没有纯css的解决方案,可以通过js

HTML

<div id="A">
    <div id='B'></div>
</div>

JS

  var _A= document.getElementById("A");//父级
  var _B= document.getElementById("B");//子级

  //为子级添加监听函数
  _B.addEventListener("mouseenter", function( event ) {   
    event.target.style.color = "purple";//改变自己样式
     _A.style.color = 'blue';//改变父级样式
  }, false);