Skip to content

Why is this JavaScript not working on my website? [closed]

In summary, I’m trying to hide the text next to an image when the web page loads and then display the text when the user hovers over the corresponding image.

I can’t seem to get it to display the text. Here’s the code:

<section class = muliticolumn >
        <img class="menuSmall" src="../images/margherita.png" onmouseover="showMargTopp()">
        <p id="margTopp">Tomato, mozzarella and basil</p>

This is the code for the image and text.



function showMargTopp() {


I’ve tried a couple different things but I can’t seem to get it to work. Thanks for any help.


ID should be Id in your function.

function showMargTopp() {

If you want it to be hidden again when you stop hovering, you will need another function for the onmouseout event.

function hideMargTopp() {

A simpler solution to this would be to use CSS :hover