Javascript alternative to CSS selectors

Question

Using jQuery, how would I go about changing the style of the <span> element, when the image is hovered in each post?

Here is an example of the HTML structure:

<img src="#" class="postone">

<div class="description">
    <p><span class="postone"> text </span> other text </p>
</div>


<img src="#" class="posttwo">

<div class="description">
    <p><span class="posttwo"> text </span> other text </p>
</div>

Here is the jQuery I have already:

$(document).ready( function(){

    $("img").hover( function(){

        var className = $("this").attr('class');
        $("span" + className).css("color", "#fff");

    });

});

… and $("this") should be $(this), yes, but really – use CSS. — Ry-
– Ry- ♦, Commented Jul 28, 2014 at 17:12
Last time I checked, browser support for :hover is pretty good. Do you need to support IE6? — nullability
– nullability, Commented Jul 28, 2014 at 17:18

BoltClock · Accepted Answer · 2014-07-28 17:26:51Z

3

Two issues:

this is a keyword, not a string, so the quotes should be removed.
```
var className = $(this).attr('class');
```
You're missing a period in your selector. The className value does not contain this period since the class attribute contains class names, not class selectors, so you will have to put it in the selector string yourself.
```
$("span." + className).css("color", "#fff");
```

With that said, I really don't see why you couldn't do this with CSS:

img:hover + .description span {
    color: #fff;
}

edited Jul 28, 2014 at 17:26

answered Jul 28, 2014 at 17:19

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

3 Comments

Sam Over a year ago

I wasn't sure how you would do it with css - so I will be using that instead of the javascript!

Sam Over a year ago

Clock, how would I do it the other way round? When you hover over the <span>, the images border changes colour? -- I'm pretty sure you would just javascript

BoltClock Over a year ago

@SAMTHEMAN999: Hmm yeah, you wouldn't be able to target it using CSS then.

RGS · Accepted Answer · 2014-07-28 17:29:33Z

2

$(document).ready(function() {
    var className;
    $("img").hover(function() {
        className = $(this).attr('class');  
        $("span." + className).css("color", "#fff");
    }, function() {
        className = $(this).attr('class');
        $("span." + className).css("color", "#000");
    });
});

You are missing a . in your class selector, and you also need to remove the double quotes from $(this). Add a mouseout function also in your code.

Demo

edited Jul 28, 2014 at 17:29

answered Jul 28, 2014 at 17:13

RGS

5,2217 gold badges44 silver badges69 bronze badges

2 Comments

ajp15243 Over a year ago

It is best to explain what you changed and why, rather than have OP hunt for the changes and guess as to why they work.

RGS Over a year ago

@ajp15243, I have updated my answer with explanation. Thanks.

Collectives™ on Stack Overflow

Javascript alternative to CSS selectors

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related