Question

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?

Answer 1

Your navIcon is an ID not a class.

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

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