JQuery Change class of a span on hover over respective li

Question

I am a novice in Jquery the below function is not working,what i am trying to do is similar to hover image thumbnail to display preview.

I have group of li's with class like "onelink" and group ofspans "one" etc. on hover of respective li want to toggle class of the span with same name

function displaydesc(id) {
  id = id.replace('link', '');
  $("#" + id).toggleClass("vis");
}

$(".list>ul>li").hover(
  function() {
    displaydesc($(this).attr("id"));
  });

.description span {
  position: absolute;
  display: none;
}
.vis {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list">
  <ul>
    <li id="onelink">one</li>
    <li id="twolink">two</li>
    <li id="threelink">three</li>
    <li id="fourlink">four</li>
  </ul>
</div>
<div class="description">
  <span id="one">Lorem ipsum dolor.</span>
  <span id="two">Tempore tenetur, doloribus.</span>
  <span id="three">Culpa, fuga adipisci.</span>
  <span id="four">Commodi, quisquam, quaerat!</span>
</div>

"below function is not working", what's not working about it? what errors are you getting? at what point does it fail? — atmd, Feb 19 '15 at 13:14
@atmd, I wasn't getting any errors with it, I noticed that he was not linking to the correct class — VaMoose, Feb 19 '15 at 13:16
changed question back to class list but the its still irresponsive — SACHIN HD, Feb 19 '15 at 13:21
OP it works on the snippet must be another thing on your code — DaniP, Feb 19 '15 at 13:21
@SACHINHD, check my JSFIDDLE, have a look for the difference in the code there and your code. — VaMoose, Feb 19 '15 at 13:24

score 2 · Accepted Answer · answered Feb 19 '15 at 13:15

2

In your jQuery, instead of .heading, use .list, as it is linking to something else.

So it should be:

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});

Here is the jsFiddle

answered Feb 19 '15 at 13:15

VaMoose

196
7

Also as an add if the point is to show/hide instead of `toggleClass` can just `toggle()` the element itself – DaniP Feb 19 '15 at 13:19
@DanielPinzon Good point, Didn't realize that, just saw the class was incorrect – VaMoose Feb 19 '15 at 13:20
Yes, the div that is above the `ul` is **`.list`**, not `.heading` – VaMoose Feb 19 '15 at 13:37

score 1 · Answer 2 · answered Feb 19 '15 at 13:19

use .list instead of .Heading

 function displaydesc(id){
    id=id.replace('link','');
    $("#"+id).toggleClass("vis");
}

$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});

.description span{
position: absolute;
display: none;
}

.vis{
display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="list">
<ul>

                        <li id="onelink">one</li>
                        <li id="twolink">two</li>
                        <li id="threelink">three</li>
                        <li id="fourlink">four</li>
</ul>
</div>

<div class="description">
    <span id="one">Lorem ipsum dolor.</span>
    <span id="two">Tempore tenetur, doloribus.</span>
    <span id="three">Culpa, fuga adipisci.</span>
    <span id="four">Commodi, quisquam, quaerat!</span>
</div>

JQuery Change class of a span on hover over respective li

2 Answers2