JS permanent hover state with radio button behavior

Question

I'm trying to use user Wind Shear's permanent hover solution on a group of thumbnails. However, I'd like the "permanent hover" state to only be applied to one thumbnail at a time. So if I hover off a thumbnail and onto the page the permanent hover stays applied to that thumbnail, but when I hover onto a different thumbnail it should take the permeant hover off the first thumbnail and apply it to the new one.

html:

<ul class="test">
    <li id="onabout">
        <a href="">Alpha</a>
        <ul>
            <li>Hiya! And it persists</li>
        </ul>
    </li>
</ul>

js:

$("#onabout").one("mouseover", function() {
    $("#onabout ul").addClass('permahover');
});

css:

ul {
    display: block;
    width: 200px;
}

ul li {
    display: block;
}

ul li a {
    display: block; 
    border: 1px solid #000;
    background: #fff;
}

ul li a {
    display: block; 
    border: 1px solid #000;
    background: #fff;
}

ul li ul {
    display: none;
}

ul li ul.permahover {
    display: block;
}

Here's the jsfiddle from Wind Shear's question: http://jsfiddle.net/jlratwil/w83BW/

The permanent hover function works great, but I can't figure out how to modify it to only apply to one thumbnail at a time. Thanks!

score 2 · Answer 1 · answered Dec 24 '13 at 17:24

2

Use .on() instead of .one()

$("#onabout").on("mouseover", function() {
    $("#onabout ul").removeClass('permahover');
    $(this).find("ul").addClass('permahover');
});

answered Dec 24 '13 at 17:24

Satpal

129,808
12
152
166

score 1 · Accepted Answer · answered Dec 24 '13 at 17:22

1

Use .on instead of .one and remove the class then add it to the hovered element

$(".onabout").on("mouseover", function() {
  $('.permahover').removeClass('permahover');
  $(this).find("ul").addClass('permahover');
});

Demo

answered Dec 24 '13 at 17:22

Zach Saucier

23,662
12
81
137

JS permanent hover state with radio button behavior

2 Answers2