Question

我希望当用户hover超过Egipat时价格也是hovered。这只能用CSS还是我需要使用JQuery？

<div class="col-sm-10 col-xs-12">
    <div class="col-sm-6 col-xs-5 tabela">
        <h5>Egipat 14.6-14.7</h5>
    </div>
    <div class="col-sm-2 col-xs-4 tabela2">
        <h5>
            <i class="fa fa-star"></i> 
            <i class="fa fa-star"></i> 
            <i class="fa fa-star"></i> 
            <i class="fa fa-star blue"></i> 
            <i class="fa fa-star blue"></i> 
        </h5> 
    </div>
    <div class="col-sm-3 col-xs-3 tabela3">
        <h5>Price: 385 kn</h5> 
    </div>
</div>

Answer 1

不，不可能你不能去css的父母，你只能去下一个或儿童元素

仅当您检查html代码中第一个div的悬停时

col-sm-10:hover > div > h5{
/*do something*/
}

Answer 2

As there is no parent selector in CSS，您可以使用adjacent sibling selectors hover家长+ {/ p>

＆＃13;

.tabela:hover,             /* "Egipat" container */
.tabela:hover + div + div  /* "price" container */
{
  color: red;
}

＆＃13;

<div class="col-sm-10 col-xs-12">
    <div class="col-sm-6 col-xs-5 tabela">
        <h5>Egipat 14.6-14.7</h5>
    </div>
    <div class="col-sm-2 col-xs-4 tabela2">
        <h5>
            <i class="fa fa-star"></i> 
            <i class="fa fa-star"></i> 
            <i class="fa fa-star"></i> 
            <i class="fa fa-star blue"></i> 
            <i class="fa fa-star blue"></i> 
        </h5> 
    </div>
    <div class="col-sm-3 col-xs-3 tabela3">
        <h5>Price: 385 kn</h5> 
    </div>
</div>

＆＃13;

Answer 3

您可以使用常规兄弟选择器~来实现此目的;您可以阅读更多相关信息here：

.tabela:hover {
  background-color: #ccc;
}
.tabela:hover ~ .tabela3 {
  background-color: #ccc;
}

<div class="col-sm-10 col-xs-12">
  <div class="col-sm-6 col-xs-5 tabela">
    <h5>Egipat 14.6-14.7</h5>&lt;--hover
  </div>
  <div class="col-sm-2 col-xs-4 tabela2">
    <h5>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star"></i>
      <i class="fa fa-star blue"></i>
      <i class="fa fa-star blue"></i>
      </h5>
  </div>
  <div class="col-sm-3 col-xs-3 tabela3">
    <h5>Price: 385 kn</h5>&lt;--hover
  </div>
</div>

这使您比相邻的兄弟选择器具有更大的灵活性，因为元素的排序无关紧要。你可以在tabela2 div之后粘贴另一个元素，并且仍然有效。

如何悬停多个项目？

3 个答案: