如何在图像上显示文本

Posted 2023-05-08

【中文标题】如何在图像上显示文本

【英文标题】：How to display text over image

【发布时间】：2013-04-15 16:56:49

【问题描述】：

我想在图像上显示文本。每当有人将鼠标悬停在图像上时。

我的 Div 块是：

<div class="MainDIV">
<br><br><br>
<div class="popular_stores"  align="center">

    <span style="font-size: 12pt;">Browse our list of stores that we have coupons, coupon codes, and promo codes for.
    </span>
    <br>
    <ul>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR31R-rZO7MBzgGMrZlpa7C0-tx3CmzVz6pha7kt8Fw6PjpsMGENg" style="width: 100px;height: 50px;" >
    </li>
</ul>
</div></div>

其余的 CSS 和 javascript 函数是：

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> 

$('.drama').mouseover(function()
    alert("dss");
    var tt = $(this).parent().find('.toolTip');
    tt.html($(this).attr('title'));
    tt.show();
);
$('.drama').mouseout(function()
    var tt = $(this).parent().find('.toolTip');
    tt.hide();
);

</script> 


<style type="text/css">

body 
    text-align: center;
    

.MainDIV
    padding:0;
    width:700px;    
    display: inline-block;  
    background-color:white;
    

.MainDIV ul
 
list-style-type: none;


.MainDIV  ul li  
    display: inline-block;
    padding : 1em;
    

.MainDIV ul li img


    padding: .2em ;
    border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #F5F5E3;


ul li divdisplay:none; background:white; opacity:.5; position:absolute;

这里显示了我想要做的事情。请看一下：click here

与此页面类似，每当有人将鼠标悬停在图像上时，我想在图像上显示文本。谁能帮帮我...

【问题讨论】：

他们只是使用 CSS 来实现这一点。大约有 1001 种方法可以做到这一点。

我将“li”显示为内联块，因此我无法放置另一个 DIV 块。它会破坏我的 Html 结构.....

他们使用span 标签来做到这一点，默认情况下也是内联的。但是您也可以浮动您的 li 标签而不是内联标签。在span 标签上使用position:absolute;，您可以在悬停li 时将它们从隐藏`更改为visible

这样的事情怎么样？ jsfiddle.net/SpYk3/vnZsN

【参考方案1】：

我用我能想到的最简单的方式构建了一个小提琴。

$('#hover1').mouseover(function()
   $('#hoverDiv1').css('opacity', 1)
);


$('#hover1').mouseout(function()
   $('#hoverDiv1').css('opacity', 0)
);

请看这个Fiddle

悬停效果没有正确定位，因为需要定义“li”。 这只是为了展示一个简单的 jQuery 方式。

最好的

【讨论】：

只要鼠标进入 DIV 块，您就会显示图像。但我只想在鼠标悬停在图像上时显示文本..

鼠标悬停在直接围绕图像的 li 上就会出现效果，您也可以将 id 传递给

将#hoverDiv1 替换为您要添加到图像中的图像ID，然后是jQuery。

jsfiddle.net/pP23k/1 请查看。效果只是在悬停第一张图片时发生。

实际上谢谢人，但现在问题是我必须通过指定手动定位每个文本块，但如何将其放置在独立于 Html 页面左侧或右侧的图像上..因为我必须在模板（Django）中使用这个'ul'。所以它应该是动态完成的..不是每个硬编码的文本都定位...