How To Create Hover Regions On Sprite?_问答_开发者

开发者 https://www.devze.com 2023-02-14 11:06 出处：网络

This code is intended to create two linked regions (for the purpose of hovering), on the top 50px of page, and next lower 50px.So that, as you move your mouse vertically, you hit the two hovers, and t

This code is intended to create two linked regions (for the purpose of hovering), on the top 50px of page, and next lower 50px. So that, as you move your mouse vertically, you hit the two hovers, and the img shifts laterally.

<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>

I w开发者_JAVA技巧ould also be fine with accomplishing this by re-positioning a background image, or with an image map.

How can I re-size a link (containing an img) so that my link hover only happens over part of the image?

For one thing, the img element will not be selected by a#a1 img:hover or a#a2 img:hover because img is not nested with either of the a tags. For another, what you want is when you hover over some element other than the image itself, shift the image, but this is not something you can do in CSS alone to my knowledge. You probably want to be using javaScript for this sort of functionality.

It's good to give sprite images on the background of the tag. Example:

.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;
    }

you have to define the background position in css. for more information read these: http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial , http://css-tricks.com/css-sprites/