[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 recommend the CSS approach over the Javascript HTML DOM one for its readability and maintainability (imagine keeping thousands of event handlers)
