CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Graphicoding
Graphicoding

Reputation: 102

How to change content of 2 childs when hover 1 child?

what I am trying to accomplish is fairly simple but complicated for me to complete. I am trying to hover on 1 child while the other 2 change background colors. And do the same for all 3 children.

HTML CODE:

<div class="servhold">
    <div class="serv">
        <h1>Clean</h1>
        <p>test test test test test test test
            test test test test test test test
            test test test test test test test
        </p>
    </div>
    <div class="serv">
        <h1>Creative</h1>
        <p>test test test test test test test
            test test test test test test test
            test test test test test test test
        </p>
    </div>
    <div class="serv">
        <h1>Responsive</h1>
        <p>test test test test test test test
            test test test test test test test
            test test test test test test test
        </p>
    </div>
</div>

CSS Code (I Tried):

.servhold .serv:hover:nth-child(1) + .serv:nth-child(n+2){
    background-color: pink;
}
// hover 1 change background 2+3
.servhold .serv:hover:nth-child(2) + .serv:nth-child(1) , .serv:nth-child(3){
    background-color: pink;
}
// hover 2 change background 1+3
.servhold .serv:hover:nth-child(3) + .serv:nth-child(1) , .serv:nth-child(2){
    background-color: pink;
}
// hover 3 change background 1+2

Any help would be appreciated (Javascript or Jquery is fine too.)

Thank you.

Upvotes: 2

Views: 84

Answers (3)

koolhuman
koolhuman

Reputation: 1651

You can bind the hover event to the class '.serv' and then add pink background to all the elements and making the background transparent on the element on which the hover function is called

$('.serv').hover(function(){
    $('.serv').css({'background-color': 'pink'});
    $(this).css('background', 'transparent');
});

Upvotes: 1

The Process
The Process

Reputation: 5953

jQuery way would be:
First function-changing siblings background.
Second function- restarting the siblings background-Put there your original background-color instead of initial 

$('.servhold .serv').hover(function() {

  $(this).siblings('.serv').css('background-color', 'pink');

}, function() {

  $(this).siblings('.serv').css('background-color', 'initial');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="servhold">

  <div class="serv">
    <h1>Clean</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
  <div class="serv">
    <h1>Creative</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
  <div class="serv">
    <h1>Responsive</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
</div>

Upvotes: 2

user1106925
user1106925

Reputation:

I think you're saying you want this:

Better view here: https://jsfiddle.net/wsbLy0b2/1/

.servhold:hover .serv {
  background-color: pink;
}

.servhold:hover .serv:hover {
  background-color: transparent;
}
<div class="servhold">

  <div class="serv">
    <h1>Clean</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
  <div class="serv">
    <h1>Creative</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
  <div class="serv">
    <h1>Responsive</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
</div>

The :hover on the .servhold turns them all pink, but the :hover on the .serv sets the specific one to transparent so the outer background shows through. You can set it to a different color if desired.

Upvotes: 4

Related Questions