How to Change Source of ≪Img≫ Tag on Hover

How to change source of img tag on hover?

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');}
function unhover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Change img src on hover

[1] How can I change img src when it's on hover

You can't do this with CSS alone, as src is a DOM attribute not a CSS attribute, to accomplish this some javascript is required with HTML DOM Event system

<body>
<div>
  <img onmouseenter="highlight(this)" onmouseleave="unhighlight(this)" 
       src="thumbnail1">
  <a href="#potato" class="hoverable-link">Some Link</a>
</div>
<script>
  function highlight(image) {
    image.src = "thumbnail2"; //Blue Image
  }
  function unhighlight(image) {
    image.src = "thumbnail1"; //Gray Image
  }
</script>
</body>

JsFiddle: https://jsfiddle.net/f0c7p3tL/2/

List of DOM Events: http://www.w3schools.com/jsref/dom_obj_event.asp

Another approach is to not using the src DOM attribute at all. Instead you can use the background CSS attribute, that way you can utilize the CSS:hover selector

CSS:

#my-thumbnail {
  background: url("/thumbnail1") no-repeat;
  width: 32px;
  height: 32px;
}
#my-thumbnail:hover {
  background: url("/thumbnail2") no-repeat;
}

HTML:

<div>
  <img id="my-thumbnail">
  <a href="#potato" class="hoverable-link">Some Link</a>
</div>

JsFiddle: https://jsfiddle.net/7xoprwky/

[2] How can I trigger hover-event for both element at the same time

Again, two approaches are available here.

First is using javascript and the HTML DOM Events. In this approach, instead of triggering events on either of the child elements, we want them to be triggered on the surrounding <div> parent element. Then, in the event handler, we select the child elements and change their DOM Attribute accordingly

<body>
<div onmouseenter="highlight(this)" onmouseleave="unhighlight(this)">
  <img id="my-thumbnail" src="thumbnail1">
  <a   id="my-anchor" href="#potato">Some Link</a>
</div>
<script>
  var myThumbnail = document.getElementById('my-thumbnail'),
      myAnchor = document.getElementById('my-anchor');

  function highlight() {
    myThumbnail.src = "/thumbnail2";
    myAnchor.style.color = "blue";
    myAnchor.style.fontWeight = "bold";
  }

  function unhighlight() {
    myThumbnail.src = "/thumbnail1";
    myAnchor.style.color = "gray";
    myAnchor.style.fontWeight = "normal";
  }
</script>
</body>

JsFiddle: https://jsfiddle.net/2uthconL/

In the second approach we utilize the CSS selector syntax to highlight our internal element from our surrounding div

CSS:

#my-thumbnail-link {
}
#my-thumbnail-link img { /* Select all img tag inside div */
    background: url("/thumbnail1") no-repeat;
    width: 32px;
    height: 32px;
}
#my-thumbnail-link:hover img { /* Select all img tag inside div when it is hovered */
    background: url("/thumbnail2") no-repeat;
}
#my-thumbnail-link a { /* Select all a tag inside div */
    color: gray;
}
#my-thumbnail-link:hover a { /* Select all a tag inside div when it is hovered */
    color: blue;
    font-weight: bold;
}

HTML:

<div id="my-thumbnail-link" class="vcenter-parent">
  <img class="vcenter-child">
  <a href="#potato" class="vcenter-child">Some Link</a>
</div>

JsFiddle: https://jsfiddle.net/x61dy0mk/2/

More on CSS Selector: http://www.w3schools.com/cssref/css_selectors.asp

If your thumbnail is just a static asset, I recommended the CSS approach over the Javascript HTML DOM one for its readability and maintainability (imagine keeping thousand of event handler)

Is it possible to change img src by hover on another element by CSS

You almost have it. Change 'content' to 'background' and use a transparent image for the image src

a.template-image[href^="/template-1978944"] div.green:hover ~ img { content: url(http://lorempixel.com/100/100/sports/);"}
a.template-image[href^="/template-1978944"] div.orange:hover ~ img { content: url(http://lorempixel.com/100/100/cats/);"}
a.template-image[href^="/template-1978944"] div.red:hover ~ img { content: url(http://lorempixel.com/100/100/nature/);"}

<a class="template-image" href="/template-1978944/editor"> <div class="green">GREEN</div> <div class="red">RED</div> <div class="orange">ORANGE</div> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="></a>

How to change an img src on a parent div hover?

Right now, you code doesn't change the src, it just change BACKGROUND and add it to present src.
If You just need to change src, you should use code like this:

    $('#widget').hover(function(){ // hover in
    $('#widget h2, #widget p').css('color','#fff');
    $('#widget-img').attr("src", "http://www.clipartkid.com/images/17/youtube-play-icon-clipart-Ns7Pf4-clipart.gif");
}, function(){ // hover out
    $('#text-button-widget h2').css('color','#000');
    $('#text-button-widget p').css('color','#000');
    $('#widget-img').attr("src", "http://www.clipartbest.com/cliparts/di8/KRL/di8KRL8ie.png");
});

How to change Image / src on hover?

The problem is that you’re updating state unconditionally during render. State updates trigger a new render, in which you do a state update, which triggers another render, in which you do a state update…

The fix is to set the initial state when you call useState instead of trying to update it immediately afterward.

You could use a mapping of statuses and do a lookup, for example:

const logImages = { A, B, C };

function Status({log}) {
  const [imgSrc, setImgSrc] = useState(logImages[log?.status] || default);
  // ...
}

Changing image src on hover

That solution outlined in your question only works if it's a pseudo-element. You'll need to either make it a background-image on the a or td and change it that way, or use a jQuery function like this:

$('a').on('mouseover', function() {
  $(this).find('img').attr('src', 'path/to/my/image.png');
});

Or native JavaScript

document.querySelectorAll('a img[alt=Link1]').addEventListener('mouseover', function() {
  this.src = 'path/to/my/image.png';
});

Change img src SVG on hover in CSS

I don't think you can do that using CSS only, but you could do it with a bit of JavaScript, if you can change the HTML.

Something like:

onmouseover="this.src='newSrcHover.jpg';"

Or you can change the background-image: url('linkToNewImage')property on :hover... while that does change an image on hover and may be sufficient for some, it's not src. The JS one is.

Change image src on the button when hover

You can do this using CSS

#Nav_Homepage span {  background: url(https://dummyimage.com/20x20/000/fff.png&text=P) no-repeat;  width: 20px;  /* your image width */  height: 20px; /* your image height */  display: inline-block;}#Nav_Homepage label {  display: inline-block;}#Nav_Homepage:hover span {  background: url(https://dummyimage.com/20x20/ff0000/ffffff.png&text=H) no-repeat;}

<button class='Nav' id="Nav_Homepage">    <span class='img_Nav'></span>    <label class='lb_Nav'> Homepage </label></button>

How to Change Source of ≪Img≫ Tag on Hover