Question

我试图在鼠标悬停在三个图像中的任何一个上时显示背景图像。这是一个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>

Answer 1

如果我是你，我会按如下方式更改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/

Answer 2

#images div包含任何内容，因此没有维度，因此永远不会悬停。您需要将三个图像放在此div中。

CSS：背景图片问题

2 个答案: