Question

我读到你可以使用Span制作一些简单的CSS工具提示，所以我尝试了它，但它不适合我，我有麻烦弄清楚原因：

if($result = $mysqli->query($query)) {
    while($obj = $result->fetch_object()) {
        $image = $obj->Image;
        $page  = $obj->Page;
        $name  = $obj->Name;
        if($image != null) {
            echo "<a href=" . $page . " target=_parent><img src=" . $image . " width=93 height=66><span class=info>test</span></img></a> ";
        }
    }
}

和CSS：

  <style type="text/css">
    body,td,th {
        font-family: "Myriad Pro";
        font-size: 12px;
        background-color:#fcfcfc;;
    }
    a {
        border:none;
    }
    img {
        border:thin solid;
        border-color:CCC    
    }
    img:hover {
        opacity:0.5;    
    }
    span.info {
        display:none;   
    }
    img:hover span.info {
        display:block;position:absolute; width:200px; height:200px; 
    }
    </style>

我的问题是Span根本不显示。任何人都有一些想法如何解决这个问题？

Answer 1

您正在寻找的选择器是：

img:hover + span.info {
    display:block;position:absolute; width:200px; height:200px; 
}

+用于相邻元素。使用空格用于后代元素（span绝对不是img的后代。）

Answer 2

我不认为将其作为图像标记上的悬停事件将起作用，因为span标记不是图像标记的子标记。

图片代码没有您在代码中编写的结束图片代码。

可以通过简单地在末尾添加斜杠来关闭它们，例如

<img src="" />

如果你把它作为'a'标签的事件，应该有效。例如

a:hover span.info {
    // your css here
}

Answer 3

你需要做两件事：

将“img：hover span.info”更改为“a：hover span.info”，因为span是a标记的子级，而不是img标记
将定位应用于a标签（当父母明确说明位置时，位置：绝对仅相对于父级）

虽然上面提到的+选择器确实适用于支持CSS3的浏览器，但这适用于所有浏览器（IE8及以下版本）。

Answer 4

据我所知，你不能在IMG标签内嵌套任何东西（这可能是为什么它没有出现） - 做这样的事情：

CSS：

.tippedImage {
position: relative
}

.tippedImage span {
display: none;
position: absolute;
}

.tippedImage:hover span {
display: block
}

HTML：

<span class="tippedImage">
<img src="someimage.gif" />
<span class="tooltip">Tool tip text</span>
</span>

带有Span的CSS工具提示不起作用

4 个答案: