Question

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

我已经用这种方式实现了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;
}

Answer 1

CSS解决方案

对你的jsfiddle工作并更改jsfiddle是http://jsfiddle.net/4Dfpm/55/

我添加了＆lt; span＆gt;里面＆lt; a＆gt;标签与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;
}

Answer 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的Sprink：

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

Et Voila：http://jsfiddle.net/4Dfpm/56/

Answer 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/

使用您的逻辑调整此模型;）

Answer 4

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

Answer 5

如果你在锚点中添加一个span，给它一个没有alpha的RGBA颜色，然后在悬停时改变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/

Answer 6

检查小提琴：

<强> 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 个答案: