Show different content on image hover

Hello,

I am trying to show different content on image hover and still wonder why nothing happen on image hover.

		<span class="col-md-3"><img id="image" class="img-fluid" src="images/home/pic_meeting.png">
		<div class="black-box"><span class="black-box-content"><center>MEETING</center></span></div>

		<div class="black-box-hover"><span class="black-box-content"><center>MEETING<br><br>We are extremely happy to<br>provide refined cater-<br>
			ing services for your special<br>
			events!  By choosing<br>
			us, you get a guarantee that<br>
			everything.<br>
			</center></span></div>
			...
			<script>
			$(document).ready(function(){

			$(".black-box-hover").hide();

			$("#image").hover(function(){

					$(".black-box").hide();
					$(".black-box-hover").show();
				
				});
			});
			</script>

Thanks in advance.

LaryAI

2 years ago

Level 58

Hello,

It seems like you're trying to toggle visibility of certain elements when hovering over an image. Your jQuery code looks mostly correct, but you might be missing the part where you handle the mouse leaving the image to revert the changes. Here's a revised version of your script that should work:

<span class="col-md-3">
    <img id="image" class="img-fluid" src="images/home/pic_meeting.png">
    <div class="black-box">
        <span class="black-box-content">
            <center>MEETING</center>
        </span>
    </div>

    <div class="black-box-hover">
        <span class="black-box-content">
            <center>
                MEETING<br><br>
                We are extremely happy to<br>
                provide refined catering services for your special<br>
                events! By choosing<br>
                us, you get a guarantee that<br>
                everything.<br>
            </center>
        </span>
    </div>
    ...
    <script>
        $(document).ready(function() {
            $(".black-box-hover").hide();

            $("#image").hover(
                function() {
                    // Mouse enters the image area
                    $(".black-box").hide();
                    $(".black-box-hover").show();
                },
                function() {
                    // Mouse leaves the image area
                    $(".black-box-hover").hide();
                    $(".black-box").show();
                }
            );
        });
    </script>

This script uses the hover function which takes two arguments: one for when the mouse enters the element (mouseenter) and one for when the mouse leaves the element (mouseleave). When the mouse enters the image area, the .black-box is hidden and the .black-box-hover is shown. When the mouse leaves, the .black-box-hover is hidden and the .black-box is shown again.

Make sure that your CSS is set up correctly so that the .black-box-hover is positioned over the image and is initially hidden. Also, ensure that jQuery is properly included in your page.

If you're using Bootstrap (as suggested by the col-md-3 class), you might also want to ensure that your HTML structure adheres to Bootstrap's grid system, typically requiring a .row to wrap columns.

I hope this helps! Let me know if you have any further questions.

gych

2 years ago

Level 29

I just tested your code and it works.

Check for errors in your browser console
I see that you're using jQuery and not Javascript did you add jQuery to your project?

Only thing that I notice is that when you leave the hovering state the text doesn't hide, should it behave like that or do you want the text to hide when leaving the hovering state?

kokoshneta

2 years ago

Level 27

If nothing happens at all, you probably haven’t loaded jQuery yet, or possibly #image is a dynamic element that wasn’t there on the page when jQuery loaded and therefore won’t pick up on any events.

What errors do you get in your console?

If you want to hide .black-box and show .black-box-hover when you hover over the image, and then reverse this effect when your mouse leaves the image, a more intuitive way to do it would be to set the hover element to be hidden right in your CSS (instead of doing it in JavaScript) and toggling the visibility of both black box elements when you hover over and leave the image. If you give both elements a descriptive additional class name, you can do it in one line of code, instead of having to select both individually:

// In your CSS
.black-box-hover {
	display: none;
	// … other rules here
}

// In your HTML
<div class="black-box toggles-visibility"><!-- content --></div>
<div class="black-box-hover toggles-visibility"><!-- content --></div>

// In your JS
$(document).ready(function() {
	$("#image").hover(function() {
		$(".toggles-visibility").toggle();
	}
}

Please or to participate in this conversation.