本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

文本显示在图像上悬停

发布于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 部分时,imagetesthoverText工作得很好。该方法的缺点是 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;
}

请参阅 W3Schools 上的 CSS 选择器列表




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/533304/65958ac96fe46490196f/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

30 0
收藏该文
已收藏

评论内容:(最多支持255个字符)