Pure CSS image swap

Question

У меня есть два изображения, которые должны быть в HTML (так что нет фонового изображения), и при наведении одного на другое он меняет местами на другой.

Я думал, что у меня работает код, но он кажется глючным. Я не могу решить эту проблему.

JSFiddle здесь: http://jsfiddle.net/5tCju/

Вот мой CSS:

#wrapper img.on, 
#wrapper.gridWrap img.on { 
display:none; 
} 

#wrapper img.default:hover img.on, 
#wrapper img.default:hover img.on { 
display:inline; 
} 

#wrapperimg.default:hover, 
#wrapper img.default:hover { 
display:none; 
} 

В любом случае, это может быть сделано путем замены изображений между display:block; и display:inline;?

Answer 1

Вот это Pure CSS Solution.

WORKING DEMO

HTML-:

<div class="images">&nbsp;</div> 

CSS-:

.images{background: url(http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-2-icon.png) no-repeat 0 0; height:300px; width:300px;} 

.images:hover{background: url(https://si0.twimg.com/profile_images/2940708431/842924fb3e2cc1f7fddf1b195c3f6c81.jpeg) no-repeat 0 0; height:300px; width:300px; cursor:pointer;} 

Я надеюсь, что это то, что вы ищете.

Answer 2

Чтобы получить это, вам необходимо установить псевдокласс класса :hover в родительский контейнер (.wrapper) вместо изображений.

jsFiddle Demo

#wrapper 
{ 
    display: inline-block; 
} 
#wrapper:hover img.default, 
#wrapper img.on 
{ 
    display:none; 
} 

#wrapper:hover img.on, 
#wrapper img.default 
{ 
    display:inline-block; 
} 

Answer 3

Простой CSS Решение:

#wrapper img { position: absolute; float: left; } 
#wrapper .on { display: none; } 
#wrapper:hover .on { display: block; } 

http://jsfiddle.net/5tCju/3/

Перевернутое версия:

#wrapper img { position: absolute; float: left; } 
#wrapper:hover .on { display: none; } 

http://jsfiddle.net/5tCju/4/

Answer 4

Игра с использованием свойства display заставляет браузер повторно создавать поток страниц, таким образом, мерцание. Обычным решением является избежать <img> тег и играть с background-image, но, если вы хотите использовать текущую разметку, вы можете просто поместить одно изображение над другим:

#wrapper{ 
    position: relative; 
} 
#wrapper img{ 
    position: absolute; 
} 

... и скрыть/отобразить второй один:

#wrapper img.on{ 
    opacity: 0; 
} 
#wrapper img.on:hover{ 
    opacity: 1; 
} 

(Updated fiddle)

display вероятно, будет работать лучше, но я не пробовал.

Answer 5

#wrapper img.on{ 
display:none; 
} 
#wrapper:hover img.default{ 
display:none; 
} 
#wrapper:hover img.on{ 
    display:block; 
} 

UPDATED FIDDLE

ваша ошибка была ваша была не используя :hover должным образом. .on не ребенок .default Вот почему заявление #wrapper img.default:hover img.on не working..as .on и .default оба ребенок #wrapper Вот почему вы должны использовать :hover для обертки, чтобы изменить изображения