作者tomin (stuffy)
看板Web_Design
標題Re: [問題] :hover 之後指定dom
時間Mon Oct 5 07:52:09 2009
※ 引述《etman395 (技術時代)》之銘言：
: 先問一下
: 如果我使用虛擬樣式表 :hover
: 接在他後面的 一定是要他的子項嗎
: 如下面 我這寫 經過的時候 只要.a2是嵌在.a1裡面
: 就可以觸發
: <style type="text/css">
: <!--
: .a1:hover .a2{
: display: inline;
: }
: .a2 {
: display: none;
: }
: body {
: behavior:url(csshover.htc)
: }
: -->
: </style>
: </head>
: <body>
: <span class="a1">點我<span class="a2">出現</span></span>
: </body>
: </html>
: 不過如果這行<span class="a1">點我<span class="a2">出現</span></span>
: 換成這樣寫
: <span class="a1">點我</span>
: <span class="a2">出現</span>
: a2沒有嵌在裡面 就不會觸發
: 請問有辦法觸發沒嵌在裡面的dom嗎
: 還是在 :hover 後面 指定的dom 一定要嵌在a1裡面??
用Adjacent sibling selectors。DOCTYPE一定要加。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
.a1:hover .a2{
display: inline;
}
.a2 {
display: none;
}
.a3:hover + .a4{
display: block;
}
.a4 {
display: none;
}
body {
behavior:url(csshover.htc)
}
-->
</style>
</head>
<body>
<span class="a1">點我<span class="a2">出現</span></span>
<br><br>
<span class="a3">點我</span>
<span class="a4">出現</span>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.122.30.140
推 etman395:謝謝 不過a4一樣沒出現..csshover.htc要用哪一版的?? 10/05 13:41
→ tomin:我不加.htc也可以用喔 你可能是用IE6吧 10/05 21:10
推 etman395:嗯 我測ie6不行 其它行 所以ie6不支援.a3:hover + .a4? 10/06 00:46
推 fotofolio:IE6不支援 + 10/06 01:20
→ etman395:了解 ie7之後才有支援+ 那請問有變通方式嗎?? 10/06 03:28
→ jojozyzy:使用<a>標籤，應該只是單純的跨瀏覽器事件。 10/06 11:16