gpt4 book ai didi

html - 为悬停标题文本提供背景

转载 作者:太空宇宙 更新时间:2023-11-04 15:47:03 26 4
gpt4 key购买 nike

可能很简单,但我没有找到解决方案

我写了下面的代码。

<html>
<head>
<style>
span.dropt {
border-bottom: thin dotted;
background:white;
}
</style>
</head>
<body>
<span class="dropt" title="Title for the pop-up">Hot Zone Text
</span>
</body>
</html>

在这里,我想要的是,当悬停光标时,我想为“弹出窗口的标题”提供背景颜色/图像。我试过了,但我没有得到解决方案。可以谁帮帮我...

最佳答案

Jquery“tooltip”是它的正确解决方案。以下是一些适合您的资源:

但是如果你想自己做一个。使用 jquery 尝试附加获取元素的 title 属性,然后在事件悬停时将其附加到 span。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropt').hover(function(){
var title = $(this).attr('title');
$(this).append('<span class="tooltip">'+title+'</span>');
},function(){
$('.tooltip',this).fadeOut('slow').remove();
});
});
</script>
<style>
.tooltip {
display:block;
padding:5px;
background:black;
color:white;
min-width:200px;
font-size:11px;
line-height:25px;
text-align:center;
position:absolute;
top:-50px;
border:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.dropt {
position:relative;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<br><br/>
<span class="dropt" title="Title for the pop-up">Hot Zone Text</span>
</body>
</html>

关于html - 为悬停标题文本提供背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11633166/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com