Question

我尝试使用CSS :hover选择器来更改兄弟元素上的CSS。在这种情况下，我尝试将其更改为display: none;

元素设置如下。

<div id="test" class="logo">
  <a href="#">
    <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">
  </a>
</div>
<div class="menu__dropdown--femme" style="text-align: right;">
  <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>
</div>

CSS：

.menu__dropdown--femme:hover #test.logo {
  display: none;
  height: 500px;
}

我在这里制作了一个可以重现问题的代码： http://codepen.io/anon/pen/NNRoMr

Answer 1

您可以使用CSS设置兄弟姐妹的风格，但前提是他们使用+符号，例如：http://codepen.io/anon/pen/BKLMGK

因此，您的HTML #test.logo必须在.menu__dropdown

之后

.menu__dropdown--femme:hover + #test.logo {
  display: none;
  height: 500px;
}

有些人在这里阅读：https://css-tricks.com/child-and-sibling-selectors/

Answer 2

你的问题不是很清楚，但现在有两种可能性！已经声明为Demo1和Demo2

＆＃13;

/* hover over logo - hides next text */

.demo-1 #test.logo:hover + .menu__dropdown--femme {
  display: none;
  height: 500px;
}
/* hover over next text hides logo */

.demo-2 .menu__dropdown--femme:hover + #test.logo {
  display: none;
  height: 500px;
}
h1 {
  color: red
}

＆＃13;

<div class="demo-1">
  <h1>Demo 1</h1>



  <div id="test" class="logo">
    <a href="#">
      <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">
    </a>
  </div>
  <div class="menu__dropdown--femme" style="text-align: right;">
    <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>
  </div>

</div>


<hr>

<div class="demo-2">
  <h1>Demo 2</h1>
  <div class="menu__dropdown--femme" style="text-align: right;">
    <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>
  </div>

  <div id="test" class="logo">
    <a href="#">
      <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">
    </a>
  </div>


</div>

＆＃13;

在兄弟元素的悬停时改变css

2 个答案: