Question

<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>";
?>

When I place swap names in the css portion, imagetest for hoverText it works perfectly fine. The drawback with that method is that the div runs across the whole page and wherever the mouse cursor passes through the div the hover pops up. The hover is just not liking the class I stored on the image. I was wondering why this was.

Answer 1

您的CSS正在尝试选择“.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;
}

See a list of CSS selectors at W3Schools

Text show over Image Hover

1 个答案: