Как установить: наведите указатель мыши на значение по умолчанию и сбросьте его после того, как мышь?

Question

В настоящее время я работаю над сайтом с двумя столбцами квадратных изображений. Каждый столбец имеет 3 изображения, поэтому всего 6 изображений. Каждое изображение имеет состояние зависания с текстом и ссылку «узнать больше».

Цель состоит в том, чтобы пользователи наводили курсор на каждое изображение, чтобы узнать больше о компании клиента. Чтобы облегчить пользователям зависание над изображениями, я пытаюсь заставить первое изображение иметь его состояние зависания как представление по умолчанию. Если вы нажмете на него, как только ваша мышь уйдет, он сбрасывается до простого изображения и возобновляет нормальную функциональность зависания.

Если возможно, что является лучшим способом для достижения этого эффекта?

Answer 1

Если это нормально, используйте jQuery, продолжайте читать.

Вместо того, чтобы класс псевдо :hover по первому вопросу, вы можете дать ему реальный класс, такие как .active, либо в разметке или с помощью JQuery, и сделать стиль точно так же, как :hover. Затем удалите этот класс, когда он зависает один раз.

Демо: http://jsfiddle.net/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"); 
    }); 
}); 

Answer 2

Как уже упоминалось в комментариях, вы можете сделать это с помощью обработчиков событий:

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

ваш первый рисунок инициализируется класс «зависания» и не использовать родной CSS: наведите псевдо-класс

https://jsfiddle.net/pa8frf89/