Hover not registering on Iframe element in all versions of Internet Explorer

Currently facing an issue with iframe:hover. The iframe on my website is hidden, and when I hover over a link or the iframe itself, it should become visible. This functionality works perfectly in most browsers, except for Internet Explorer (all versions). Despite trying multiple solutions, I have been unable to resolve this problem.

Here is a live example of the issue - look for the "MedicalTourism Reviews" element located next to the contact form.

Any suggestions on how to fix this?

EDIT: Check out this JSFiddle example

<div id="wbw">
    <a class="wh"></a>
    <div id="ta_widget_box"></div>
    <script language="Javascript" src="http://reviews.treatmentabroad.com/js/widget.js"></script>
    <script language="Javascript">init_widget_rnr('278237/es','ta_widget_box');</script>
</div>
htmlcssinternet-exploreriframe

Answer №1

This selector seems to be causing an issue, especially in IE7/IE8:

#wbw a.wh:hover + #ta_widget_box {
    display: block;
}

Considering the browser compatibility issues, I recommend using a simple javascript solution. Here is a basic example:

http://jsfiddle.net/3zLK5/9/

I have tested this solution in IE7/IE8/IE9 and it appears to work properly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the variable obtained from the user input and insert it into a new container depending on the input value

In reference to my previous inquiries, I refrain from adding more details to avoid confusion since it already received numerous responses. While I can successfully retrieve input from a text field with the ID 'test' and display it in the 'r ...

javascripthtml

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

javascripthtmlcssdjango

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...

javascripthtmlcss

When the update button is clicked, the textfield is hidden; it reappears upon refreshing the page

Our marketplace multi-vendor site on Magento allows sellers to list their products for sale. The frontend displays the price using the following code: Phtml <input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" clas ...

javascriptphpcssmagento

Issue with applying className to ToggleButton component in React with Material-UI

When utilizing React and Material UI, my goal is to efficiently apply styles to a group of ToggleButtons. At the moment, I am only able to specify the style prop for each individual ToggleButton in order to achieve the desired styling. I am attempting to ...

cssreactjsmaterial-uiclassname

What is the best way to create a carousel component with this particular design?

`I want to enhance my static HTML CSS website by incorporating a slider feature using JavaScript. Looking for guidance on the best approach. Here is the layout. I've attempted various tutorials but they weren't compatible with my layout or reli ...

javascripthtmlcssslidercarousel

How can I detect when the user has finished typing in the input field using React?

I've implemented a highly efficient component that sends messages to the server and displays them to other users in real-time. Check out the code snippet: const ChatInput = (props) => { const [message, setMessage] = useState(''); con ...

javascripthtmlreactjs

Streamlining form submission processes with VBA automation of check box selections

Currently, I am facing a challenge with automating the process of filling out a web form using VBA. Specifically, I have hit a roadblock when it comes to selecting a checkbox in the form before proceeding. Here is the HTML code pertaining to the checkbox: ...

htmlvbaautomation

Finding the Row Number of an HTML Table by Clicking on the Table - Utilizing JQuery

Seeking assistance to tackle this issue. I currently have an HTML table with a clickable event that triggers a dialog box. My goal is to also retrieve the index of the row that was clicked, but the current output is not what I anticipated. //script for the ...

javascripthtmljquery-uijquery-events

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

javascriptcssdictionarykmlboundary

Is it possible to align the navigation within the Bootstrap (5) grid structure like I have shown in my example?

Can this be achieved? Any tips on how to do it while sticking within the Bootstrap framework would be greatly appreciated. Text blocks should align with the navigation border on the left and right side: <link rel="stylesheet" href="https://cdn.jsd ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-grid

Having issues with AngularJS ng-click functionality in IE11

In the HTML, I have a button defined as follows: <button type="button" class="btn btn-default" ng-click="onCancel()">Cancel</button> This button is connected to a function in the controller's $scope. I am currently using AngularJS 1.2 ...

angularjsinternet-explorer

What is the best way to emphasize the chosen node in a treeview using jQuery?

.treeview ul { background-color: white; margin-top: 4px; } .treeview a:visited { background-color: Yellow; } .treeview a:active { background-color: Yellow; } .treeview a:selected { background-color: Yellow; } When I click on a node ...

jqueryasp.netcsstreeview

A vertical divider within an ion-item collection

Currently, I am using Ionic and HTML to implement a vertical line within an ion-item in an ion-list. The desired outcome is to have something similar to this (the colored line after 'all-day'): I attempted the following approach: <ion-list&g ...

htmlionic-frameworksassionic2ionic3

The HTML5 Canvas Misalignment Issue

I currently have some HTML code that includes a canvas, span, and a button: <canvas id='myCanvas'></canvas> <span id='coords'></span> <button class='clear'>clear</button> Accompanying this ...

jqueryhtmlhtml5-canvas

The Angular tutorial for the "Tour of Heroes" is experiencing issues with aligning the heroes' list properly

I am currently working on the Angular tour of heroes tutorial. However, I am facing an issue when trying to display the list of heroes as it appears like this: https://i.sstatic.net/AGnzJ.png It is strange because even though the CSS/HTML/TS code from the ...

htmlcssangulartypescript

Using a Jinja 'for' loop to create nested 'If' statements

I'm attempting to include an if statement within a loop for a jinja template: </table> <class="container"> <table border ="1"> <caption> BBOXX <caption> <thead class="thead-inverse"> <tr> <th& ...

pythonhtmlfor-loopif-statementjinja2

What is the best way to adjust the content of a Bootstrap Column to be at the bottom of the column

Currently diving into the world of Bootstrap for my personal website, I'm encountering a challenge in aligning the content of my sidebar to the bottom. My quest for a solution led me through numerous threads without success. <!-- wordsmith: < ...

javascripthtmlcssbootstrap-5

Trouble with padding in Twitter bootstrap

I am puzzled as to why the navigation links at the bottom of my page ("prev" and "next") are wider than the post teasers in my #bloglist above. I am currently utilizing twitter bootstrap with their provided scaffolding. Any insights or recommendations wou ...

htmltwitter-bootstrappadding