在悬停时显示文本时使 img 变暗答案

【问题标题】：Darken img while exposing text on hover在悬停时显示文本时使 img 变暗
【发布时间】：2012-12-06 11:13:08
【问题描述】：

我的网站中的某些图像在悬停时需要变暗，同时也需要显示在悬停之前隐藏的文本（文本将显示在变暗图像的顶部）。

我已经以这种方式实现了 img-darken 部分 - http://jsfiddle.net/4Dfpm/。

实现“悬停时显示文本（相同悬停）”部分的好方法是什么？可以只用 CSS 完成吗，还是我这次需要使用脚本？

谢谢。

** img-darken 部分是如何实现的：



a.darken {
    background: black;
}

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

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

【问题讨论】：

不要这样做！不要模糊人们试图关注的确切内容！无论如何，请调暗页面上的其他所有内容，但不是您最想强调的内容...

标签： javascript jquery css hover

【解决方案1】：

CSS 解决方案

在你的 jsfiddle 上工作并改变了 jsfiddle 是 http://jsfiddle.net/4Dfpm/55/

我在标记中添加了 class=darken

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

【讨论】：

【解决方案2】：

明显的 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/

【讨论】：

显然不是 jQuery 解决方案 :-)

【解决方案3】：

使用脚本来做到这一点

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/

用你的逻辑调整这个模型；）

【讨论】：

【解决方案4】：

如果你在锚点内添加一个跨度，给它一个白色的 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.net/Kyle_Sevenoaks/4Dfpm/57/

【讨论】：

【解决方案5】：

检查小提琴：

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

【讨论】：

【解决方案6】：

试试这个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;
  }

【讨论】：