CODEWITHSUNDEEP
jqueryhtml
accraze
accraze

Reputation: 1552

Jquery wont change text in div on mouseenter

I am trying to have text appear in a <div> when you hover over an <li> in a different <div> For some reason its not working. It should take the data-name from the <li> and pass it to .pagename_h1 using html()...heres the code:

list item
<li id="navIcon" data-name="News"><a class='inline' href="#inline_content"><img src="images/christian.jpg" class="hoverImages"></a></li>

list item
<script>$('.navIcon').hover( function () { $('.pagename_h1').html($(this).attr('data-name')); }); </script>

the div where the data-name should show up in text
<section class="round"> <div class="pagename_h1"> </div> </section>

Am i using the CSS selector correctly for .pagename_h1? Should I be using something other than hover instead? Is .html() not the proper function to replace text?

Upvotes: 0

Views: 202

Answers (2)

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 2090

You are trying to retrieve an element with class = navIcon while you set that navIcon as an id . Try the following selector instead : 

$('#navIcon')

Upvotes: 0

sachleen
sachleen

Reputation: 31141

Your navIcon is an ID not a class.

Change it to $('#navIcon').hover()

Read more about jQuery selectors, specifically Class Selector and ID Selector

Upvotes: 1

Related Questions