Question

我试图在将鼠标悬停在图像底部的图像上后显示一些线条（比如大约10px）

我在MTV的 website中看到了他们的每个帖子下面的“你也想要这些”部分。他们使用css-background sprites来做到这一点。

在重复失败的尝试之后，我发疯了。除了主要的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>

任何帮助都将不胜感激。谢谢

Answer 1

这是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 2

您可以做的简单事情是在悬停时在图像上设置边框。

即

标记

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

Answer 3

我为你做了工作小提示，你的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;
}

如何使用精灵将图像显示在悬停的图像上

3 个答案: