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;
}
Why do tags appear when I input xmlhttp.responseText into my textbox? It displays <!DOCTYPE html><html><body></body></html> along with the desired content. Is there a way to prevent the tags from being displayed? Here is the ...
While trying to follow a tutorial, I noticed that the style sheet isn't being applied to the clicked element in the list. What could be causing this issue? In the example provided, when a string is added to the text box and the button is clicked, a n ...
My code includes a segment like this: <div class="ui-table"> <div class="items"> <div class="justify-content-end d-flex"> <span class="text- ...
I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...
In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...
I have a HTML code snippet that I am trying to parse in order to extract the nodeValue of all elements within the table columns. <table id="custinfo"> <tr> <td><label>First Name</label></td> <td& ...
I am currently working on a responsive page design and have come across this useful resource: http://www.bootply.com/2sfiCehqac My main objective is to ensure that when the screen size is medium or large: 1) div_left and div_right (orange and blue) adjus ...
I'm running into an issue with Vs code where it's not recognizing ejs output tags when they're inside an html tag, like in the input tag below : <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form. ...
I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...
I have my main page located at index.html and I am trying to transfer my template to base.html. In the index.html file, I used {% extends 'base.html' %}, but it is showing an error of *Unresolved template reference ''base.html'&apo ...
Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...
Trying to design a layout with a topbar followed by a split layout has posed some challenges. The main issue I encountered was the need for the width and height to adjust automatically based on the browser size. To address this, I attempted to use a table ...
I am currently working with a JQuery function that highlights a specific word and scrolls to it: $('article.node--article p, .video-title').highlightWordAndScroll({ words : search_word, tag : '<span class="found_key ...
Is it possible to replicate the search box effect on the Android website, where the menu items fade out and the search box expands upon clicking the search icon?view image here See the difference before and after clicking the search icon ...
Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...
I've been attempting to display an HTML input element and an SVG image on the same line without success. I've tried various solutions from stackoverflow, but none seem to work for me. Here's my current HTML code: <div id = "inline_eleme ...
Here's the scenario: I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine. However, my issue arises from having multiple tables with var ...
I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...
I am attempting to retrieve JSON data from the following URL: . When using the file_get_contents() function, I encountered the following error message: Error Message: require(): https:// wrapper is disabled in the server configuration by allow_url_fope ...
I need help with an HTML page that puts the worker on pause time which will be subtracted from his/her day job. The issue is that when he/she refreshes the page, the timer starts from the beginning automatically. I want it to continue without resetting. Is ...