1

我读到您可以使用 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>

我的问题是跨度根本不会显示。有人知道如何解决这个问题吗？

4

4 回答 4

2

您正在寻找的选择器是这样的：

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

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

于 2013-01-10T22:27:14.603 回答
1

我认为将其作为图像标签上的悬停事件不会起作用，因为跨度标签不是图像标签的子标签。

图像标签没有您在代码中编写的结束图像标签。

它们可以通过简单地在末尾加上一个斜线来关闭，例如

<img src="" />

如果您将其作为“a”标签的事件，则应该可以使用，例如

a:hover span.info {
    // your css here
}
于 2013-01-10T22:24:41.593 回答
1

你需要做两件事：

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

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

于 2013-01-10T22:27:38.077 回答
0

据我所知，你不能在 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>
于 2013-01-10T23:56:53.060 回答