Victor Elias Rodriguez Victor Elias Rodriguez - 1 year ago 59
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>
<script src=""></script>

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

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

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


Answer Source

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

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

See this working fiddle