Selector issue using a loop in jQuery

Question

In my jQuery code (see below), I can't manage to change the color of the "typetravaux" class content.
The opacity change on hover is OK, but the color change does not work (I tried 2 different ways, but none of them is working).

Can you guys tell me what I am doing wrong ? Thanks !

CSS :

.typetravaux {
  width: 100%;
  color: #ffffff;
}

HTML:

<div class="solutions">
    <div class="bloc1">
      <span class="typetravaux">PLOMBERIE</span>
       <div class="picture"><img src="img/plomberie.png" class="prestapicture"></div>
     </div>
    <div class="bloc2">
      <span class="typetravaux">CHAUFFAGE</span>
       <div class="picture"><img src="img/chauffage.jpg" class="prestapicture"></div>
     </div>
    <div class="bloc3">
      <span class="typetravaux">CLIMATISATION</span>
       <div class="picture"><img src="img/climatisation.jpg" class="prestapicture"></div>
     </div>
</div>

jQuery :

$prestapicture = $('.prestapicture');

for (y=0; y < $prestapicture.length; y++) {
    $prestapicture.eq(y).on("mouseover", function() {
      $(this).css("opacity", "0.3");
      $(this).prev(".typetravaux").css("color","black") // **does not work**
    
    })
    
    $prestapicture.eq(y).on("mouseout", function() {
      $(this).css("opacity", "1");
      $(".typetravaux").eq(y).css("color","white"); //**does not work either**
    
    })
}

T.J. Crowder · Accepted Answer · 2020-10-31 13:10:30Z

1

prev uses the previous sibling, but the .typetravaux elements aren't siblings of the .prestapicture elements, they're siblings of those elements' parent .picture elements.

You could fix that like this:

$(this).parent().prev(".typetravaux").css("color","black");
//      ^^^^^^^^^

...but it's quite fragile, minor changes to the HTML break it.

Instead, I'd either:

Add a class to the container div and do this:

$(this).closest(".container").find(".typetravaux").css("color","black");

or

Add a class to that container for when you want this different styling, and use a descendant combinator (a space) in CSS to do the CSS changes.
```
.pic-hovered .typetravaux {
    color: black;
}
```

In general, I would avoid using css() for styling. Use classes, and put the style rules in your CSS.

answered Oct 31, 2020 at 13:10

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selector issue using a loop in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related