发布于2023-12-26 22:16 阅读(681) 评论(0) 点赞(30) 收藏(1)
<style>
/* CSS for the span */
.hover {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 96%;
margin-left: -60px;
}
/* CSS for the text containing the span */
.imagetest {
position: relative;
}
/* CSS for text on hover */
.imagetest:hover .hover {
visibility: visible;
display:inline-block;
}
</style>
PHP/HTML
<?php
echo "<div class='hoverText' align=right><img class='imagetest' src='Files/infoplaceholder.png' height=20 width=20><span class='hover'> See About Page for more info </span></div>";
echo "<BR>";
?>
当我将交换名称放在 css 部分时,imagetest
它hoverText
工作得很好。该方法的缺点是 div 贯穿整个页面,并且无论鼠标光标经过 div,悬停都会弹出。悬停只是不喜欢我存储在图像上的类。我想知道这是为什么。
您的 CSS 正在尝试选择具有“hover”类的“.imagetest”子元素。由于span.hover标签不是.imagetest的子标签,css不会选择它。
尝试这样的事情
<div class='hoverText' align=right>
<span class='imagetest'>
<img src='Files/infoplaceholder.png' height=20 width=20 />
<span class='hover' > See About Page for more info </span>
</span>
</div>
这将帮助 CSS 找到内部跨度作为 .imagetest 的子元素
另一种选择是使用 CSS 选择器来选择同级
.imagetest:hover + .hover {
visibility: visible;
display: inline-block;
}
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/533304/65958ac96fe46490196f/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!