Sorry if the title isn't clear. Basically, I have a div that when hovered over, triggers another div to appear with display:block, showing it above the original div. It works well but there is some flickering when moving the cursor over the second div.
There's also a small issue where the second div disappears momentarily when clicked.
Take a look at this jsFiddle for an example: http://jsfiddle.net/uB82S/1/
**
**
Revise your HTML as follows:
<div class="product-main">
<div id="img-container" class="img-container">
<div class="feature-product-img" id="feature-product-img" style="display: block;">
<a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
<img class="product-img" src="http://www.spinnakerextreme.com/media/catalog/product/p/r/product_2_bg.png" alt="2012 TT Isle of Man Official Review Blu Ray and DVD" />
</a>
****move this inside the feature-product div****
<div class="main-img" id="main-img">
<a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
<img src="http://www.spinnakerextreme.com/media/catalog/product/cache/1/small_image/9df78eab33525d08d6e5fb8d27136e95/t/t/tt_man_review_1.png" height="184" id="main-image-img"/>
</a>
************
</div>
</div>
<div class="product-description">
<a href="http://www.spinnakerextreme.com/2012-tt-isle-of-man-official-review-blu-ray-and-dvd.html" title="2012 TT Isle of Man Official Review Blu Ray and DVD">
2012 TT Isle of Man Official Review Blu Ray and DVD
</a>
</div>
Update the css to:
.feature-product-img:hover > .main-img{
display:block;
}
.feature-product-img .main-img:active {
display:block;
}
To enhance the user experience, consider placing the hover effect on the product container instead of the main image itself. This will ensure a more consistent display of the main image.
http://example.com/hover-product-container
.product-container {
display: inline-block;
}
.product-container:hover .main-image{
display:block;
}
.main-image:active {
display:block;
}
To ensure proper functionality, make sure to utilize the correct selector. For reference, visit http://jsfiddle.net/uB82S/7/
/*
.feature-product-img:hover + .main-img {
display:block;
}
.feature-product-img + .main-img:active {
display:block;
}
* substitute with the following code ..
*/
#img-container:hover div#main-img {
cursor: pointer;
display: block;
}
Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...
I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...
I am facing an issue with a function that generates XML from a source. Everything works perfectly except for when certain fields are too long, causing the table to stretch and mess up the website formatting. Is there a way to automatically insert line brea ...
Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...
There is a div element with a data-id attribute. The goal is to use jQuery to detect when this div is clicked and then send or store the corresponding data-id value in a PHP file. However, the code provided raises an error when trying to obtain the data-id ...
I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...
I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...
Can anyone help me figure out how to access specific elements in my Shiny app using their HTML tags? In this particular example, I need to retrieve all h1 elements along with their respective labels and IDs. library(shiny) ui <- fluidPage( h1("Get" ...
I'm having an issue with my contact form. I tried testing to see if I can retrieve the values from the form, but it's giving me back: name: undefined I'm not sure why it's not working! Here is the code for the form: <form met ...
The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...
It's frustrating to constantly have to ask questions. I've been struggling to implement code on my website, but every time I try to add something new, it just doesn't work. I even tried changing the CSS names, thinking that might solve the i ...
Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...
I wrote some code in HTML/JavaScript/PHP, and in the 3rd echo statement, I added a button that calls the deleteAttribute() function when clicked. However, I encountered an error at the 3rd echo statement with (type = "button"): "Uncaug ...
While conducting my study, I required a Likert scale and came across a well-designed one at https://codepen.io/Buttonpresser/pen/poXVod However, I encountered an issue where selecting an answer for one question would deselect the answer for a different qu ...
Is there a way to remove the gravatar link from WordPress admin while still keeping the profile picture intact? I'd like to know how to achieve this. ...
I have been struggling to find a solution to this particular issue. My goal is to position an image at both the top and bottom of the page using a background property. I understand that by making the positioning relative, the image will be placed at the bo ...
I have a webpage where I update the contents of an unordered list using $.get() every 5 seconds. The issue I am facing is that the click function for the list items is not working properly. Even though the list items are being updated correctly, there se ...
My jQuery image thumb Slider features thumb buttons that link to different div elements. When a user clicks on a thumb button, I want the associated div to smoothly fade in, replacing the previous one. The goal is to have a seamless transition between the ...
Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...
My navigation bar appears to have an unexpected 5px padding issue that is causing it not to align properly at the top. To investigate, I have created a basic header.html + header.css setup as follows: <link href="css/header.css" rel="stylesheet"> &l ...