如何在图片悬停时显示文本

Question

如何在图片悬停时显示文本

5

我有一些缩略图，希望在鼠标悬停时显示一些文本。我可以在悬停时使它们变暗，但不知道如何添加文本。

例如：http://www.lenzflare.com/video-production-portfolio/

这是我做的：

    a {
    display: inline-block;
    overflow: hidden;
    position: relative;
    }
    a:hover .play {
    background:url(http://goo.gl/yJqCOR) no-repeat center    center;
    opacity: 0.8;
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -150px;
    }

<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>

示例：http://jsfiddle.net/jmXdh/79/

- user2977338

你确定你没有用错方法吗 -> http://jsfiddle.net/jmXdh/80/ - adeneo

@adeneo，你的链接有效吗？我试了一下，但是不行。 - user2977338

解决方案：https://dev59.com/WXPYa4cB1Zd3GeqPeAfO - user2977338

7个回答

2

你可以考虑像这个 jsfiddle 这样的东西。我在这里复制我的代码：

=================

HTML

    <a href="/"  class="img" 
          style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');" 
          onmouseover="this.firstElementChild.style.display='block'" >
          <span class='play' onmouseout="this.style.display = 'none'";>
           my lovely text here
          <span>
    </a>

=================

CSS

a {
    min-height:104px;
    min-width:184px;
    display: inline-block;
    overflow: hidden;
    position: relative;
}
.play{
    display:none;
    color:#fff;
    height:104px;
    width:184px;
    background-color:rgba(0,0,0,0.5);
    position: absolute;
}

- Andreas

1

看起来您想要一个工具提示，如果是这样，那么请将标题添加到a href中：

<a href="/" title="This is my text" >

你也可以使用jQuery UI中的工具提示。

否则，你可以使用javascript的onmouseover或jQuery的hover/mouseenter事件来显示播放div中的文本。你可能需要确保播放div的z-index比img高。

- acarlon

谢谢您的帖子。我不擅长jQuery，所以不知道这个答案。 :/ - user2977338

1

这个可以正常工作：

.pic{
    background: url(http://i42.tinypic.com/2v9zuc1.jpg);
    width: 200px;
    height: 100px;
}

.text{
    background: black;
    text-align: center;
    color: white;
    opacity: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.text:hover{
    opacity: 0.8;
}


<div class="pic">
    <div class="text">My Text</div>
</div>

演示

- alexP

0

向 play 元素添加一些文本内容。

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

为.play添加了CSS：

color:#fff;
font-size:16px;

- Eric

0

试试这个：http://jsfiddle.net/JU7zm/

<a href="/">
    <div class="play">text</div>
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>



a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

a .play {
    display: none;
    background:url(http://goo.gl/yJqCOR) no-repeat center center;
    opacity: 0.8;
    position: absolute;
    width: 184px;
    height: 104px;
    color: #fff;
}

a:hover .play { display: block;  }

- Nabbit

0

以下是一个简单的JS解决方案，您可以将其插入到您的HTML中：

<script type="text/javascript">
    document.getElementById("your_image_id").title = 'your hover text';
</script>

- Ansjovis86

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sheriffderek · Accepted Answer

我假设你想把这个内容列成一个列表:

这里有几个主要的概念：相对定位以及它如何与绝对定位配合使用，源顺序以及你的居中技术。

当将position:relative;应用于盒子时，你在说“现在我是边界 - 对于任何在我内部绝对定位的东西”（除非它们是相对的，然后就像这样一直向下）- 因此，您要淡入的绝对定位覆盖物 - 绝对定位到相对盒子的一个或多个边缘。（大多数人使用top:0;left:0;) ---因此，绝对框不再处于“流动”状态，而是生活在其由相对父级确定的自己的魔力世界中。

源顺序：当堆叠时，你的html将从底部向上显示。因此，你的覆盖物应该在图像下面（按html顺序） - 你可以使用z-index - 但没有必要这样做。

负边距在这里并不真的很棒，也不需要。你可以把它们文本对齐居中。我会做一些测试，围绕着东西画边框，这样你就可以看到实际发生了什么。而且 - 我鼓励你在所有东西上使用box-sizing:border-box;

阅读：Border box

HTML

<ul class="thumbnail-list">

  <li>
    <a href="#" class="image-w">
      <img alt="thumbnail"
           src="http://placekitten.com/600/300" />
      
      <div class="cover">
        <h3>Title</h3>
        <p>A little bit more about the thing</p>
      </div>
    </a>
  </li>
  
</ul> <!-- .thumbnail-list -->

CSS

.thumbnail-list {
  list-style: none;
  margin: 0; paddingn: 0;
}

.thumbnail-list li {
  float: left;
}

a {
  text-decoration: none;
  color: inherit;
}

.thumbnail-list .image-w {
  display: block;
  position: relative;
  width: 16em;
}

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

.cover {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,0);
  text-align: center;
  transition: all 1s linear;
}

.cover:hover {
  background-color: rgba(0,0,0,.8);
  color: rgba(255,255,255,1);
  transition: all .2s linear;
}

.thumbnail-list h3 {
  font-size: 1.2em;
}

.thumbnail-list p {
  font-size: .9em;
}

Here is the code in action on jsfiddle