``In Internet Explorer, the function to swap the image source when hovering over the parent element

I'm trying to make it so that when I hover over the parent (Li) tag with my mouse, the src attribute of the child img tag changes. This code works correctly in Chrome but not in Firefox and Internet Explorer.

<li class="player">
 .
 .
 //some code.......
 .
 .
  <table>
    <tr class="tr-msg">
      <td>
         <a>
            <img class="msg" src="../images/message-icon-h.png" />
         </a>
      </td>
    </tr>
  </table>
</li>

 <style>
   .player:hover .msg{
     content:url("../images/message-icon.png");
    }
 </style>
javascriptjqueryhtmlcss

Answer №1

The designated class you referenced as .liplay is not found in your HTML code. It should be changed to .player for the functionality to work correctly.

.player:hover .msg{
     content:url("../images/message-icon.png");
}

View Working Demo

UPDATE:

I suggest utilizing the background-image property to accomplish your desired outcome. Modify your CSS like so:

.player a{
    display:block;
    background-image: url("../images/message-icon-h.png");
    width:64px;
    height:64px;
    }

.player:hover > a{
    display:block;
    background-image: url("../images/message-icon.png");
    width:64px;
    height:64px;
}

Here's another demonstration in jsFiddle

This solution has been tested and verified to work seamlessly on Chrome, Firefox, Internet Explorer, Opera, and Safari browsers.

Answer №2

It appears that you are aiming to achieve this: 

<style>

li.player:hover .msg
{
content:url("../images/message-icon.png");
}

</style>

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

Tips for implementing jquery.validation on a form that has been dynamically rendered and returned by an AJAX request

I am encountering a minor issue with the implementation of the jQuery validation plugin. When using static forms that are rendered during regular page load, the validation works flawlessly. The code snippet I utilize for validation looks similar to this: ...

phpjqueryjquery-validate

Trouble with Loading Google Place Autocomplete API in HTML

I utilized the Google MAP Place Autocomplete API for a web project. Click here to view the code and output. <form> <input id="origin-input" type="text" class="form-control" placeholder="From"/> <br/> <input id="de ...

javascripthtmlgoogle-mapsgoogle-maps-api-3autocomplete

Contact form repair completed - Messages successfully delivered

I am facing an issue with the contact form on my HTML landing page. Currently, when you click the 'Submit' button, it redirects to a new PHP page displaying 'Success'. Is there a way to make it so that upon clicking 'Submit' a ...

javascriptphphtmlformscontact-form

Issues arise with dynamic content when implementing the jQuery mobile framework alongside the risky swiper library

I have been working on a jQuery mobile web application where I attempted to integrate the dangero.us swiper. Despite filling my swiper-container with dynamic HTML and using the reinit() function as recommended in other tasks, nothing seemed to happen. Her ...

jquerymobiledynamicswiper.js

Unable to locate module: Unable to locate the file './Header.module.scss' in '/vercel/path0/components/Header'

I encountered an error while attempting to deploy my next application on Vercel. I have thoroughly reviewed my imports, but I am unable to pinpoint the issue. Module not found: Can't resolve './Header.module.scss' in '/vercel/path0/comp ...

javascriptreactjsnext.jsvercel

Obtain an item from an array by utilizing the property with Lodash _.find

I currently have an array of objects called memberToChange.checkboxes: ICheckbox[] structured like this: https://i.stack.imgur.com/LyKVv.png Within this setup, there is also a variable named internalNumber with the value "3419". My objective is to locate ...

javascriptangularjsarrayslodash

Insert text within a span tag next to a picture

Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...

htmlcsstwitter-bootstrap-3

What is the reason behind AngularJS consistently selecting the first TD cell?

I'm a beginner in AngularJS and I'm testing my skills by creating a small game. Here's the table structure I have: <table class="board"> <h1>Table</h1> <input type="number" ng-model="val"><button ng-click="ctrl.f ...

javascriptangularjs

Error: The function coolArr.printArray is not defined in the npm package being imported

My custom package contains an index.js file with the following code: module.exports = class CoolArray extends Array { printArray() { console.log(this); } } After transpiling the code using es2015 syntax with Babel, I connected the package to my te ...

javascriptnode.jsnpmbabeljses6-class

Conceal/Inactivate element when scrolling, and once scrolling comes to a halt, reveal it once more

I have been working on creating a div tag to overlay an embed tag and added some javascript to prevent users from right-clicking to download the pdf inside the embed tag (even though it may seem unnecessary, it was requested by my customer). Here is the ma ...

javascripthtmlcss

I wasn't able to use the arrow keys to focus on the select box in my table, but I had no problem focusing on all

I'm a novice in jQuery and I encountered a situation where I have select boxes and text fields within my table. I successfully implemented arrow key functionality (down for next, up for prev) for shifting focus to the field by assigning classes to eac ...

javascriptjqueryyii2

Ensures that two divs have the same dimensions

Currently, I have a line of sections set up like this: I am attempting to ensure that the second div matches the height of the first one, despite the fact that their heights are determined by the size of the pictures which may vary. Do you have any sugges ...

htmlcssheight

Are the buttons appearing within a pop-up display?

I am having an issue with my Javascript popup buttons. Whenever the popup appears, the buttons that come after the one clicked appear on top of the popup container, and the previous buttons appear behind it. How can I ensure that the popup container displa ...

javascripthtmlcssbuttonpopup

The final Bootstrap radio element is missing from view

Presented below is the form in question: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ...

htmlbootstrap-5

Is the div height set to 100% until the content surpasses the height of the browser window

Is there a method to make a div fill 100% of the available page height, until it contains enough content to require a scrollbar? // For example, if the browser height is 600px: <div> // Initially empty, so it will be 600px tall. </div> . ...

htmlcss

Programming the tab pages within Chrome

By using JavaScript, I successfully opened a new tab at www.blogger.com from the Main.html page. <script> window.open("https://www.blogger.com"); </script> I am now on the blogger page. My goal is to automatically scroll to the end of the bl ...

javascriptjquerytabs

What is the best way to accommodate 4 columns within a 3-column HTML table layout?

I am facing a challenge with my table layout. Normally, it has 3 columns, but I am trying to figure out how to fit 4 cells into one row while maintaining the same width. Any suggestions on how to achieve this? ------------- | 1 | 2 | 3 | ------------- | ...

htmlhtml-table

Unable to open file after downloading via AJAX

I am facing an issue while trying to download a file using an Ajax request. Although the file is successfully downloaded, I am unable to open it. I am seeking assistance with the provided details below. Thank you. On a JSP page, there is a list ...

javascriptajaxjsp

Show the nested div when hovering over the containing div using JavaScript

I have a situation where I have multiple divs within a parent div, all using the same class. Here is an example: <div class="deck-content"> <div class="deck-box">TEST< <div class="deck-hidden">< <span class= ...

javascriptjqueryhtmlcss

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss