У меня есть некоторые значки в моем контенте, и я хочу, если бы я навешивался над одним из значков, будет что-то вроде круглых изображений вокруг значка, или значок станет больше:
Я пытался:
.pic2
{
z-index:100;
position:absolute;
left:64%;
bottom:44%;
}
.pic2:hover{
background-image:url("slicingimages/media/icon_highlight.png");
}
мой контент:
<div id="content">
<p2>
<content class="contentUpper"><img src="SlicingImage/Images/alacards_coupons_illustration.png"> </img></content>
<content class="text" id="user2">ONE PLACE TO GET REWARDS</content>
<div><img class="pic2" src="SlicingImage/Media/gift_icon.png" height="8%" width="4%"><img></div>
<div><img class="pic4" src="SlicingImage/Media/browser_icon.png" height="8%" width="4%"></img></div>
<div><img class="pic5" src="SlicingImage/Media/twitter_icon.png" height="8%" width="4%"></img></div>
<div><img class="pic6" src="SlicingImage/Media/facebook_icon.png" height="8%" width="4%"></img></div>
<content class="text" id="user4">FROM YOUR LOYAL BRANDS</content>
<div><a href="#" id="user" class="showLink" onclick="showHide('example10');return false;">
<img class="back" src="SlicingImage/prev_button.png"></a></img></div>
<div><a href="#" id="user" class="showLink" onclick="showHide('example12');return false;">
<img class="next" src="SlicingImage/next_button.png"></img></a></div>
<content class="text" id="homeNext"> With all your loyality card, reward points, coupons & discount vouchers </div>
</p2>
</div>
Это пример использования Image Sprites (например, изображение, содержащее несколько значков) и замену одного значка на другой значок при зависании.
Вам нужно удалить изображение переднего плана и просто использовать фоновое изображение (иначе оно будет отображаться поверх фонового изображения, и вы не увидите никаких изменений). Когда вы делаете это изменение, нет никакой особой необходимости использовать тег IMG
поскольку вы можете применить фоновое изображение к чему-либо.
Вы можете увидеть это в действии в этом JSFIDDLE.
.pic2{
background-image:url("http://i.stack.imgur.com/LOxx3.jpg");
background-repeat: no-repeat;
background-position: left -16px center;
display: inline-block;
width: 46px;
height: 46px;
margin: 23px;
}
.pic2:hover{
background-position: left -178px center;
width: 92px;
height: 92px;
margin: 0px;
}
Причина, по которой он не работает, заключается в том, что для.pic2 есть тег изображения в html. Который берет на себя весь элемент. Таким образом, фокус на зависании работает правильно, он просто не появляется, потому что изображение перед ним!
Для того, чтобы это работало, только с CSS, вам нужно использовать фоновое изображение вместо тега html-изображения.
Например, вы удалили бы это
<img src="SlicingImage/Media/gift_icon.png" height="8%" width="4%">
и добавьте это в.pic2
.pic2
{
background-image: url("SlicingImage/Media/gift_icon.png");
}
и сохраните.pic2: наведите один и тот же
Вы можете использовать код ниже
.pic2:hover{
border:5px;
//Your code
}
Вы хотите показать большее изображение при наведении меньшего размера? Если это ваш вопрос, тогда вы можете попробовать под CSS
.
.thumbnail
{
background-image:url('/somesmallimgpath.png');
}
.thumbnail:hover
{
background-image:url('/somebigimgpath.png');
}