How to hover multiple items?

Question

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>

Rickert · Accepted Answer · 2015-11-26T14:20:19.010

3

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*/
}

edited Nov 26 '15 at 14:20

answered Nov 26 '15 at 14:03

Rickert

1,597
1
15
23

score 3 · Answer 2 · edited May 23 '17 at 12:23

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>

score 1 · Answer 3 · answered Nov 26 '15 at 14:08

1

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.

answered Nov 26 '15 at 14:08

Pavlin

4,939
6
31
47

Neat trick, I removed my answer already. I didn't know this but will start using it. tnx!! – Rene van der Lende Nov 26 '15 at 14:13
can you extend your answer and show how it works when I hover either element (if possible at all)? I can't seem to find a proper selector. Simply reversing the logic was too easy – Rene van der Lende Nov 26 '15 at 14:30
Unfortunately you can't reverse the effect. The general sibling selector requires the first element to be declared before the target element in the DOM. So in this case `.tabela` has to be in front of `.tabela3` in the DOM. There's no way to do a reverse select as far as I know. I think you'd need javascript for that. – Pavlin Nov 26 '15 at 14:46
I'm pulling hairs over this. One option would be giving them the same ID, but that's bad behaviour...checking `:hover` on `a` with equal `target`s – Rene van der Lende Nov 26 '15 at 14:56

How to hover multiple items?

3 Answers3