CODEWITHSUNDEEP
css
None
None

Reputation: 9247

How to hover multiple items?

I want when user hover over Egipat that price is also hovered. Is that possible only with CSS or I need to use 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>

Upvotes: 0

Views: 188

Answers (3)

Rickert
Rickert

Reputation: 1675

No, its not possible you can't go to parents in css, you can only go to next or to child elements

only if you check the hover of the first div in your html code

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

Upvotes: 3

Vucko
Vucko

Reputation: 20844

As there is no parent selector in CSS, you can hover the parent itself + using adjacent sibling selectors:

.tabela:hover,             /* "Egipat" container */
.tabela:hover + div + div  /* "price" container */
{
  color: red;
}
<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>

Upvotes: 3

Pavlin
Pavlin

Reputation: 5528

You can achieve this using the general sibling selector ~; You can read more about it 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>

This gives you more flexibility than the adjacent sibling selector, since the ordering of the elements doesn't matter as much. You could stick another element after the tabela2 div, and still have it work.

Upvotes: 1

Related Questions