0

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

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

在反复尝试重新创建失败后，我快疯了。一切正常，除了主要的悬停线出现。到目前为止，这是我的代码

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>

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

4

3 回答 3

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/

于 2013-10-06T14:23:23.527 回答
1

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

IE

标记

<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);
}
于 2013-10-06T14:23:30.133 回答
1

我已经为您制作了工作小提琴，在您的 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;
}
于 2013-10-06T14:26:48.990 回答