CODEWITHSUNDEEP
jquery
CupcakeByDesign
CupcakeByDesign

Reputation: 17

Toggle span text on hover over parent div

I am trying to toggle the span text of a div when hovering over it. I want this function to work on numerous divs each with their own text, so I have created an ID for each div but they share the class .square . I have tried multiple variations, including $('span",this).toggle and $(this).children().toggle(); but nothing seems to be working. I'm sure there's something small I've missed when translating examples to my own code but can't for the life of me figure out what. Thanks for any help.

Currently my code looks like this:

HTML

<div id="B1" class="square">
    <span class="details">This is square 1</span>
</div>
<div id="B2" class="square">
    <span class="details">This is square 2</span>
</div>

CSS

  .square{
height:100px;
width:100px;
background-color:#0AA0AB;
color:#FFFFFF;
cursor:pointer;
text-align:center;
margin-left:10px;
display:inline-block;
}

jQuery

    $('.square').hover(function() {
    $(this).children().toggle();
});

Upvotes: 0

Views: 988

Answers (3)

palaѕн
palaѕн

Reputation: 73906

Try this:

$('.square').hover(function () {
    $(this).children('.details').toggle();
}, function () {
    $(this).children('.details').toggle();
});

DEMO HERE

Upvotes: 1

Robin Leboeuf
Robin Leboeuf

Reputation: 2116

You can try 

$('span',$(this)).toggle(); // Note the $() around the this

But maybe CSS is sufficient (if I understood the problem correctly :) ):

.square > span {display:none;}
.square:hover > span {display:inline;}

Upvotes: 1

user1788747
user1788747

Reputation:

You can use toggleClass:

$('.square').hover(function() {
    $(this).children().toggleClass('square');
});

Upvotes: 0

Related Questions