2

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

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

6 回答 6

9

CSS 解决方案

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

我在 <a> 标记中添加了 <span>，其中 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;
}
于 2012-12-06T11:26:41.940 回答
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>

JS：

$("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

如果您在锚点内添加一个跨度，给它一个没有 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/

于 2012-12-06T11:30:59.857 回答
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 回答