2

私のウェブサイトの一部の画像は、ホバーしたときに暗くする必要があり、同時にホバーする前に非表示になっていたテキストを表示する必要があります (テキストは暗い画像の上に表示されます)。

私は既にhttp://jsfiddle.net/4Dfpm/のように img-darken 部分を実装しています。

「ホバー時にテキストを公開する(同じホバー)」部分を実装する良い方法は何ですか? CSSだけでできますか、それとも今回はスクリプトを使用する必要がありますか?

ありがとう。

** img-darken 部分が既に実装されている方法:

​

a.darken {
    background: black;
}

a.darken img {
    display: block;
    transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}
4

6 に答える 6

9

CSS ソリューション

あなたのjsfiddleに取り組み、変更されたjsfiddleはhttp://jsfiddle.net/4Dfpm/55/です

class=darken で < a > タグ内に < span > を追加しました

<span>text</span>

そして更新されたcssは

a.darken{
...;
position:relative;
...
}

新しく追加されたcssは

a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}
于 2012-12-06T11:26:41.940 に答える
0

アンカーの内側にスパンを追加し、アルファなしの白のRGBA色を指定し、ホバーしてアルファ値を変更すると、CSSだけで必要な効果が得られます。

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
    <span>text</span>
</a>

スパンをアンカー内に配置して、画像の下に表示されないようにすることを忘れないでください。

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
    position: relative;
}

a.darken span
{
    position: absolute;
    top: 10px;
    left: 10px;
    color: rgba(255, 255, 255, 0);
}

a.darken:hover span
{
    color: rgba(255, 255, 255, 1); 
}

http://jsfiddle.net/Kyle_Sevenoaks/4Dfpm/57/

于 2012-12-06T11:30:59.857 に答える
0

明らかな jQuery ソリューション: マークアップにメッセージを追加します。

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
    <span class="message">Some message here</span>
</a>

css を追加します。

a.darken span{
    display:none;
    position:absolute;
    top:0px; left:0px;
    float:left;
    color:white
}

JQuery のふりかけ:

$('.darken').hover(
    function(){
       $(this).find('.message').fadeIn(1000);
    },
    function(){
       $(this).find('.message').fadeOut(1000);
    }
    );

出来上がり: http://jsfiddle.net/4Dfpm/56/

于 2012-12-06T11:26:02.810 に答える
0

それを行うにはスクリプトを使用します

HTML:

<div class="hoverText">Some text</div>

J:

$("img").hover(
  function () {
    $(".hoverText").show();
  }, 
  function () {
    $(".hoverText").hide();
  }
);​

CSS:

 div.hoverText{display = none;}

これはフィドルです：

http://jsfiddle.net/HFgGx/

このモックアップをロジックで調整してください ;)

于 2012-12-06T11:30:09.420 に答える
0

これを試してみてください http://cssdesk.com/hrKeE

.captioned {
  position:relative;
  display:inline-block;
}
  .captioned img {
    display:block;
  }
  .captioned .caption {
    position:absolute;
    top:0;
    left:0;
    display:none;
    width:100%;
    height:100%;
    color:white;
    background:rgba(0, 0, 0, .75);
  }
  .captioned:hover .caption {
    display:block;
  }
于 2012-12-06T11:30:42.533 に答える
0

フィドルを確認してください：

http://jsfiddle.net/4Dfpm/59/

すべてCSSを通して行われます。jQueryでも実現できますが、

あなたのhtmlを少し編集しました：

<a href="http://google.com" class="darken">
    <img src="http://callzeb.com/themes/images/JQuery_logo.png">
    <span>123</span>
</a>

CSSも少し編集しました：

a.darken {
   display: inline-block;
   background: black;
   padding: 0;
   width:229px;
   height:200px;
   overflow:hidden;
   position:relative;
   text-align:center;
}

a.darken img {
   display: block;

-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}

a.darken:hover span{
    display:block;
    position:absolute;
    z-index:9999;
    bottom:10px;
    color:red;
    font-size:24px;        
}

span{display:none;}
于 2012-12-06T11:36:55.447 に答える