在懸停時顯示文字時使圖像變暗

在懸停之前，我網站中的某些圖像需要變暗，並且同時顯示懸停前隱藏的文字（文字將顯示在變暗圖像的頂部）。在懸停時顯示文字時使圖像變暗

我已經用這種方式實現了img-darken部分 - http://jsfiddle.net/4Dfpm/。

什麼是實施「懸停文本（同一懸停）」部分的好方法？只能用CSS來完成，否則這次我需要使用腳本？

謝謝。

**如何已經實施的IMG-變暗部分：

 

a.darken { 
    background: black; 
} 

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

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

來源

2012-12-06 Daniel

不要這樣做！不要模糊人們試圖關注的確切事物！通過一切手段，在頁面上暗淡*其他*，但不是你最想強調的東西... –

CSS解決方案

曾爲您的jsfiddle和改變的jsfiddle是http://jsfiddle.net/4Dfpm/55/

我已經加入< 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-06 11:26:41

明顯的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); 
    } 
    );

的Et瞧：http://jsfiddle.net/4Dfpm/56/

來源

2012-12-06 11:26:02 Jamiec

顯然不是一個jQuery解決方案:-) – iappwebdev

使用腳本來做到這一點

HTML：

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

JS：

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

級

的CSS：

div.hoverText{display = none;}

這是一個小提琴：

http://jsfiddle.net/HFgGx/

調整此樣機與你的邏輯;）

來源

2012-12-06 11:30:09

試試這個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-06 11:30:42

如果添加跨越錨點，給它一個RGBA顏色白色，不帶alpha，然後懸停改變alpha值，你會得到你想要單獨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。淨/ Kyle_Sevenoaks/4Dfpm/57/

來源

2012-12-06 11:30:59 Kyle

檢查小提琴：

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

全部完成throught CSS。 althought你可以用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-06 11:36:55 Jai

在懸停時顯示文字時使圖像變暗

回答

相關問題