0

画像の下部にある画像にマウスを置いた後、いくつかの線を表示させようとしています(約10px)

これは、MTV のWeb サイトで、すべての投稿の下にある "You would also like these" セクションで見ました。

再作成の試みが何度も失敗した後、私は怒っています。メインのオンホバーラインが表示されることを除いて、すべてが機能します。これはこれまでの私のコードです

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>

任意の助けをいただければ幸いです.Thanks

4

3 に答える 3

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 に答える
1

これはHTMLです：

http://yoururlあなたのURLに置き換えてください。

<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

あなたができる簡単なことは、ホバー時に画像に境界線を設定することです。

すなわち

マークアップ

<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 に答える