Victor Elias Rodriguez Victor Elias Rodriguez - 6 months ago 13
Javascript Question

Replace Text in P Element on Rollover of another Div

I can't believe that I'm having so much trouble with this; thought the first result in Google would do it. I'm just trying to be able to roll over an image and replace the text in a p element (Select a Module) with another pre-defined text. When my mouse leaves the image, the p element goes back to a default text (Select a Module).

This is what I have, but no response from the script ...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
$('p#module_1').bind('mouseover', function() {
$('p#module_main').text('Module 1');
});
});
</script>
</head>
<body>

<p id="module_main">Select a Module</p>

<p id="module_1">Icon 1</p>
<p id="module_2">Icon 2</p>

</body>
</html>

Answer

The issue is when you close after your bind() function. You need add a DOM ready function.

$(document).ready(function(){
    $('p#module_1').bind('mouseover', function() {
        $('p#module_main').text('Module 1');
    });
});

See this working fiddle

Comments