0

マウスが 3 つの画像のいずれかにホバーされたときに表示される背景画像を取得しようとしています。ここに jsFiddle があります: http://jsfiddle.net/cvh2013/gefKT/、誰か私が間違っていることを教えてもらえますか? 現時点では、3 つの円形の画像のいずれかにカーソルを合わせても背景画像は表示されません。

<!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は、画像を使用するよりもはるかにクリーンです（ロードするアセットがもう1つあります）。IE8以下でこれを機能させたい場合は、実際のイメージアプローチを使用できます。

フィドル： http： //jsfiddle.net/gefKT/9/

于 2013-03-15T21:04:05.620 に答える
0

div には何も含まれていないため、ディメンションがないため、#imagesホバーすることはできません。この div内に 3 つの画像を配置する必要があります。

于 2013-03-15T21:00:08.307 に答える