I am currently working on a website that has two columns of square images. Each column has 3 images, so 6 images total. Each image has a hover state with text and a 'learn more' link.

The intent is that users hover over each image to learn more about the client's pany. To help facilitate users hovering over the images, I am trying to force the first image to have it's hover state as the default view. If you mouse over it, once your mouse leaves, it resets to just the plain image, and resumes normal hover functionality.

If possible, what is the best way to acplish this effect?

I am currently working on a website that has two columns of square images. Each column has 3 images, so 6 images total. Each image has a hover state with text and a 'learn more' link.

The intent is that users hover over each image to learn more about the client's pany. To help facilitate users hovering over the images, I am trying to force the first image to have it's hover state as the default view. If you mouse over it, once your mouse leaves, it resets to just the plain image, and resumes normal hover functionality.

If possible, what is the best way to acplish this effect?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Mar 20, 2015 at 20:54 Nathan SkinnerNathan Skinner 2311 silver badge44 bronze badges 2

• 1 Sounds like you need to set up event handlers in javascript or jquery to change your images on hover. The native addEventListener function or jquery's hover methods could be used to listen for the hover and execute a callback function, which contains the logic that would swap out your image for something else. – Andrew Kirchmyer Commented Mar 20, 2015 at 20:59
• You also might be able to avoid using JS pletely and go with a pure css solution. This example is a work in progress but may be a step in the right direction. – Andrew Kirchmyer Commented Mar 20, 2015 at 21:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If it's OK to use jQuery, keep reading.

Instead of having the pseudo class :hover on the first item, you can give it a real class such as .active, either in the markup or through jQuery, and make the style exactly the same as :hover. Then remove the that class when it was hovered once.

Demo: http://jsfiddle/96mwjs0x/1/

HTML

<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>

CSS

li:hover,
li.active {
    color: red;
}

jQuery

$(function() {
    $("li:first-child").addClass("active")
    $(".active").mouseover(function() {
      $(this).removeClass("active");
    });
});

As mentioned in the ments, you can do this by using event handlers:

$(".square").hover(function(){
    $(this).addClass("hover");
}, function(){
    $(this).removeClass("hover");
})

have your first picture initialized with "hover" class and don't use native css :hover pseudo class

https://jsfiddle/pa8frf89/