.hoverと.click、同じdivの異なる機能、Jquery

"Toggle 1"をホバリングすると "1"を表示し、 "Toggle 1"をクリックすると "2"を表示します。また、「Toggle 2」がホバーで「3」、クリックで「4」と表示されるルールを作成したいとします。私は（2）『にも切り替えることが2をクリックできるようにするには、フロント「の背後にあるホバー（トグル1）』のクロージングのdivを置く。.hoverと.click、同じdivの異なる機能、Jquery

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div class="hover">Toggle 1 
<div class="front" style="display:none">2</div></div> 
<div class="back" style="display:none">1</div> 

<div class="hover">Toggle 2 
<div class="front" style="display:none">4</div></div> 
<div class="back" style="display:none">3</div> 

<script> 

$("div.hover").click(function() { 
$("div.front").toggle(); 
}); 

$("div.hover").hover(
function() { $(this).children("div.back").show(); }, 
function() { $(this).children("div.back").hide(); } 
}); 
</script> 

</body> 
</html>

出典

2012-04-12 Artroing

使用 '$ .on（）'ではなく '$ .click /ホバー/変更/生きる（）'、など！ –

あなたのコードはどんな意味がありません。

$("div.hover").hover(
function() { $(this).children("div.back").show(); }, 
function() { $(this).children("div.back").hide(); } 
});

何をしようとしていますか？同時に隠れて見せる？

グレッグB.はそうですが、問題は解決しません。

は、このコードを試してみてください。

 <!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<div class="hover">Toggle 1 
<div class="front" style="display:none">2</div> 
<div class="back" style="display:none">1</div> 
</div> 
<div class="hover">Toggle 2 
<div class="front" style="display:none">4</div> 
<div class="back" style="display:none">3</div> 
</div> 
<script> 


hoverdiv = $("div.hover") 

hoverdiv.on("hover", function() { 
    $(this).children(".front").show() 
}); 
hoverdiv.on("mouseleave", function() { 
    $(this).children(".front").hide() 
}) 
hoverdiv.on("click", function() { 
    $(this).children(".back").toggle() 
}) 
</script> 

</body> 
</html>

出典

2012-04-12 20:54:18

ありがとう、私はこれが私が探している解決策だと思います。 – Artroing

ここに問題があります。これでアクションはもう1つに限定されなくなりましたが、すべてのアクションはToggle1とToggle2で同時に発生します。 – Artroing

'hoverdiv = $（" div.hover "）'を 'hoverdiv = $（" div.hover：first "）'に置き換えることができます。 –

あなたのクロージングdiv要素が間違った場所にあり、それをねじ込むていますアップだと思います。

<div class="hover">Toggle 1 
    <div class="front" style="display:none">2</div> 
    <div class="back" style="display:none">1</div> 
</div> 

<div class="hover">Toggle 2 
    <div class="front" style="display:none">4</div> 
    <div class="back" style="display:none">3</div> 
</div>

ことを試してみてください。

出典

2012-04-12 20:41:12

パーフェクトhttp://jsfiddle.net/5ReXv/1/ +1： –

ありがとう！ – Artroing

.hoverと.click、同じdivの異なる機能、Jquery

答えて

関連する問題