如何把使用精靈

Question

我試圖做一些線路出現（說一下10px的），在圖像

我看到底部的圖像上懸停鼠標後懸停在圖像上的圖像出現這在MTV的 website在他們的「你也會喜歡這些」部分下面的每篇文章。他們使用CSS背景精靈來做到這一點。

經過多次失敗的嘗試重新創建，我會生氣。除了主要的onhover線路出現之外，萬能的工作。 這是我code到目前爲止

CSS

.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;} 

.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;} 

HTML

<div class="movieL hover_thumb"> 
<div><a href=""><img width="165" height="93" alt="" src=""/></a> 
<div class="yel_strip"></div> 
</div> </div> 

任何幫助將是appreciated.Thanks

Answer 1

我生氣了E使用搗鼓你在你的HTML中沒有額外不需要標記：http://jsfiddle.net/PJMPw/3/

你的HTML：

<a href="#" class="hoverable"> 
    <img src="http://placekitten.com/g/300/300" /> 
</a> 

和CSS：

.hoverable { 
    display: block; 
    position: relative; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 

.hoverable:hover:after { 
    bottom: 0; 
} 

.hoverable:after { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 10px; 
    bottom: -10px; 
    left: 0; 
    background: -moz-linear-gradient(left, rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1))); 
    background: -webkit-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%); 
    background: -o-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%); 
    background: -ms-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%); 
    background: linear-gradient(to right, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%); 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

Answer 2

這是HTML：

回覆與您的網址http://yoururl。

<div class="container"> 
    <a href="http://yoururl" id="internal_image"><span></span></a> 
</div> 

這是CSS：

更換HTTP // yourimage您的圖片地址。

.container { 
    width: 165px; 
    height: 93px; 
    background: url('http//yourimage'); 
    position: relative; 
} 

#internal_image { 
    display: blocK; 
    width: 165px; 
    height: 93px; 
} 

#internal_image:hover span { 
    display: block; 
    width: 165px; 
    height: 5px; 
    position: absolute; 
    background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat; 
    background-position: -280px -495px; 
    bottom: 0; 
} 

編輯：追加例題：http://jsfiddle.net/BmwCe/3/

Answer 3

你可以做的事情simples上設置懸停在圖像上邊框。

即

標記

<div class="image-container"> 
     <img src="../styles/images/Desert.jpg" /> 
    </div> 

CSS

.image-container { 
    display: inline-block; 
    position: relative; 
} 

.image-container img { 
    width: 100px; 
    height: 100px; 
} 


.image-container img:hover { 
    border-bottom: 5px solid green; 
} 

如果你堅持，你想有一個背景圖像，而不是邊界，你可以做到這一點

<div class="image-container"> 
     <img src="../styles/images/Desert.jpg" /> 
     <div class="shiny-border"></div> 
    </div> 



.image-container { 
    display: inline-block; 
    position: relative; 
} 

.image-container img { 
    width: 100px; 
    height: 100px; 
} 

.image-container .shiny-border { 
    position: absolute; 
    top: 90px; //subtract the height of the shiny-border from 100px which is the height      // to have the inset effect of the image 
    height: 10px; 
    width: 100%; 
    display: none; 
} 

.image-container img:hover + .shiny-border { 
    display: block; 
    background-image: url(../styles/images/Hydrangeas.jpg); 
}