Как создать области наведения на спрайте? - PullRequest
Новая
       22

Как создать области наведения на спрайте?

0 голосов
/ 02 марта 2011

Этот код предназначен для создания двух связанных областей (с целью зависания), на верхних 50 пикселях страницы и на следующих нижних 50 пикселях.Таким образом, когда вы перемещаете мышь вертикально, вы нажимаете на два зависания, и img смещается вбок.

<html>
<head>
<style type="text/css">
a {display:block; left:0; height:50px; width:300px;}
a#a1{top:50;}
a#a2{top:100;}
a img {position: absolute; top:0; left:0; width:300px;}
a#a1 img:hover {left: 50px;}
a#a2 img:hover {left: 100px;}
</style>
</head>

<body>
<a id="a1" /><a id="a2" /><img src="smiley.gif" />
</body>
</html>

Я также согласился бы выполнить это путем изменения положения фонового изображения или карты изображений.

Как изменить размер ссылки (содержащей img) так что моя ссылка наведена только на часть изображения?

Ответы [ 2 ]

0 голосов
/ 02 марта 2011

Хорошо давать спрайт изображения на фоне тега.Пример: 

.read {
        background: url('../../img/home/home-assets.png')no-repeat  0 0;
    }
.read:hover {
        background: url('../../img/home/home-assets.png')no-repeat  0 -50px;
    }

Вы должны определить положение фона в css.для получения дополнительной информации прочитайте их: http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial, http://css -tricks.com / css-sprites /

0 голосов
/ 02 марта 2011

С одной стороны, элемент img не будет выбран a#a1 img:hover или a#a2 img:hover, потому что img не вложен ни в один из тегов a.С другой стороны, вы хотите, чтобы при наведении указателя мыши на какой-либо элемент, кроме самого изображения, было смещено изображение, но это не то, что вы можете сделать только в CSS, насколько мне известно.Вы, вероятно, хотите использовать javaScript для такого рода функций.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...