0

以下のjQueryを純粋なCSS(3)で作ることは可能でしょうか?

$(".js.outer").hover(function() {
    $(this).css({'border': '2px inset red'});
    return false;
}, function() {
    $(this).css({'border': 'none'});
    return false;
});

$(".js.inner").hover(function(event) {
    $(this).css({'border': '2px inset blue'});
    return false;
}, function() {
    $(this).css({'border': 'none'});
    return false;
});

このHTMLで

<div class="js outer">
    <div class="js inner">
    </div>
</div>

私はこのフィドルhttp://jsfiddle.net/AA9Nw/で試しましたが、内側の要素をホバーすると、外側もホバーイベントを取得します。(CSSあり)

余談ですが、jQuery は少しバグがあるようです。マウスが左または右から入ると、ホバー効果が適切に手放されません。私は何か間違ったことをしていますか？

4

2 に答える 2

3

落ち着いてこれを試してみてください

<div id="div2"></div> <div id="div3"></div>

JavaScript なし、css デモのみ

于 2013-05-16T07:41:01.253 に答える
2

Working FIDDLE Demo

div を分離します。

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
</div>

そして、これはCSSです：

.container {
    position: relative;
}

.one {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: green;
}

.two {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    background: yellow;
}

.one:hover {
    border: 2px solid red;
}

.two:hover {
    border: 2px solid blue;
}
于 2013-05-16T07:35:19.247 に答える