0

当鼠标悬停在三个图像中的任何一个上时，我正在尝试显示背景图像。这是一个jsFiddle： http: //jsfiddle.net/cvh2013/gefKT/，谁能告诉我我做错了什么？目前，当您悬停三个圆形图像中的任何一个时，背景图像根本不会显示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>SVG Included with <object> tag</title>

<style>
.center {
text-align: center;
}

#images:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
}
</style>
</head>

<body>
<table style="width: 100%">
    <tr>
        <div id="images">
            <td class="center"><object type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object></td>
            <td class="center"><object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object></td>
            <td class="center"><object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object></td>
        </div>
    </tr>
</table>

</body>
</html>
4

2 回答 2

2

如果我是你，我会按如下方式更改 CSS：

<style>
.center {text-align:center;}
.boxy:hover {box-shadow:0 0 5px #000; border-radius:50%;}
</style>

并将.boxy类添加到您声明的对象中。Border Radius 比使用图像（要加载一个资源）要干净得多。如果您希望它在 IE8 及更低版本上工作，您可以使用您想要的实际图像方法。

小提琴：http: //jsfiddle.net/gefKT/9/

于 2013-03-15T21:04:05.620 回答
0

div 不包含任何内容，#images因此没有尺寸，因此永远不能悬停在上面。您需要将您的三个图像放在这个 div 中。

于 2013-03-15T21:00:08.307 回答