Question

我想弄清楚如何在div之上的img中显示文字？我不想使用背景图像，因为我的div被命名为相同并且最终会被循环，所以我想让它保持开放以回应数据库中的文本。

那么，有没有办法根据.box创建一个带文本的唯一悬停？ .box重复多次。我可以通过CSS或jQuery来实现吗？

如果这有意义，或者您需要更多信息，请告诉我。

谢谢，凯蒂

Answer 1

您可以使用绝对定位的div，它是div的子级，其中包含图像。例如：

<div class='parent'>
  <img src='yourImage.jpg' alt='image'/>
  <div class='child'>
    <p>your text</p>
  </div>
</div>

用这个css：

.parent
{
    position:relative;
}
.child
{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
    padding:10px;

    display:none;
}

希望这会有所帮助

编辑：OOPS！误读了这个问题。要实现悬停，只需添加display：none; #child并使用此jQuery在悬停时显示它：

$(function(){
    $('.parent').mouseenter(function(){
        $(this).children('.child').fadeIn();
    }).mouseleave(function(){
        $(this).children('.child').fadeOut();
    });
});

编辑＃2：将所有内容更改为类，以便您可以拥有任意数量的

编辑＃3：这已成为一种习惯:)修复了一些拼写和CSS

编辑＃4：根据kokos的评论，悬停可以在纯css中完成（但没有jquery的好看）

Answer 2

在以下位置查看正确的（纯css）实现：

http://jsfiddle.net/rs9Vz/

这是代码

HTML：

<div class="container">
  <img src="http://colorvisiontesting.com/plate%20with%205.jpg"/>
  <div class="child"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p></div>
</div>

CSS：

.child{
    position: absolute;
    height: 80px;
    background-color: rgba(0,0,0,0.7);
    left:0; bottom: 0;
    color:white;padding:10px;
    display:none;
}

.container{
    position:relative;
    display:inline-block;
}
.container:hover .child{display:block;}

Answer 3

您希望页面上的任何图片都有标题来执行此操作我建议使用jquery检查您想要标题的图像，然后显示或隐藏标题。

$(".imgCon>img").each(function() {
    $(this).hover(

    function() {
        $(this).parent().find("span").toggleClass("captionShow");
    });
});

这将检查图像容器中的每个图像，然后在图像悬停时显示标题。

假设您的html结构如下：

<div class="imgCon">
    <img width="100" height="100" src="#" alt="Image"/>
    <span class="captionHide">Some caption text</span>
</div>
<div class="imgCon">
    <img width="100" height="100" src="#" alt="Image"/>
    <span class="captionHide">Some caption text</span>
</div>

CSS：

.captionHide
{
    display:block;
    visibility:hidden;
}
.captionShow
{
    display:block;
    visibility:visible;
}

http://jsfiddle.net/3BF2H/15/

Answer 4

title属性可能就是您所需要的。将其设置在div或图像上，当您使用鼠标悬停时，浏览器将自动显示它。如果您需要/希望更多地控制文本显示格式，MrBorna的解决方案会更好。对于“DOM标题属性”或“工具提示”的描述搜索，例如：http://javascript.about.com/library/bltip1.htm

如何将文本悬停在div img上？

4 个答案: