rocketspacer rocketspacer - 1 month ago 8
CSS Question

Change img src on hover

How do I create an url link prefixed with a small thumbnail-image, such that when I hover on them, BOTH the link color and the thumbnail-image change

Example:

enter image description here

Im now using an image tag that goes with an anchor tag, Im able to change the anchor tag text color on hover, however I dont know how to change the img src accordingly

CSS:

.hoverable-link {
color: gray;
}
.hoverable-link:hover {
color: blue;
}


HTML:

<div>
<img src="thumbnail-1"> //Change to thumbnail-2
<a href="#" class="hoverable-link">Cool Link</a>
</div>


JsFiddle: https://jsfiddle.net/rbb5ow1v/9/

In conclusion:

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

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

Answer

[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)