複数の画像スライダーをホバー上でクリックできないonClick（）

このコードがあり、ホバー上の画像でうまくいきますが、画像はうまく再生されますが、リンクをクリックすると、前進するにはうまくいかない。あらゆるヒントをお願いします。ここ複数の画像スライダーをホバー上でクリックできないonClick（）

はコードです：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>test</title> 
<meta name="description" content=""/> 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 


<style> 

body{background-color:#000} 

.img-wrapper{ 
width: 300px; 
height: 400px; 
position: relative; 
margin: 0 auto; 
cursor:pointer 
} 
.img-wrapper img{ 
top: 0px; 
left: 0px; 
position: absolute; 
-webkit-animation: showMe 1.6s linear infinite 0s forwards; 
-moz-animation: showMe 1.6s linear infinite 0s forwards; 
-o-animation: showMe 1.6s linear infinite 0s forwards; 
-ms-animation: showMe 1.6s linear infinite 0s forwards; 
animation: showMe 1.6s linear infinite 0s forwards; 
-webkit-animation-play-state: paused; 
-moz-animation-play-state: paused; 
-o-animation-play-state: paused; 
-ms-animation-play-state: paused; 
animation-play-state: paused; 
} 
.img-wrapper img:nth-child(1){ 
z-index: 9; 
} 
.img-wrapper img:nth-child(2){ 
-webkit-animation-delay: 0.2s; 
-moz-animation-delay: 0.2s; 
-o-animation-delay: 0.2s; 
-ms-animation-delay: 0.2s; 
animation-delay: 0.2s; 
z-index: 8; 
} 
.img-wrapper img:nth-child(3){ 
-webkit-animation-delay: 0.4s; 
-moz-animation-delay: 0.4s; 
-o-animation-delay: 0.4s; 
-ms-animation-delay: 0.4s; 
animation-delay: 0.4s; 
z-index: 7; 
} 
.img-wrapper img:nth-child(4){ 
-webkit-animation-delay: 0.6s; 
-moz-animation-delay: 0.6s; 
-o-animation-delay: 0.6s; 
-ms-animation-delay: 0.6s; 
animation-delay: 0.6s; 
z-index: 6; 
} 
.img-wrapper img:nth-child(5){ 
-webkit-animation-delay: 0.8s; 
-moz-animation-delay: 0.8s; 
-o-animation-delay: 0.8s; 
-ms-animation-delay: 0.8s; 
animation-delay: 0.8s; 
z-index: 5; 
} 
.img-wrapper img:nth-child(6){ 
-webkit-animation-delay: 1.0s; 
-moz-animation-delay: 1.0s; 
-o-animation-delay: 1.0s; 
-ms-animation-delay: 1.0s; 
animation-delay: 1.0s; 
z-index: 4; 
} 
.img-wrapper img:nth-child(7){ 
-webkit-animation-delay: 1.2s; 
-moz-animation-delay: 1.2s; 
-o-animation-delay: 1.2s; 
-ms-nimation-delay: 1.2s; 
animation-delay: 1.2s; 
z-index: 3; 
} 
.img-wrapper img:nth-child(8){ 
-webkit-animation-delay: 1.4s; 
-moz-animation-delay: 1.4s; 
-o-animation-delay: 1.4s; 
-ms-animation-delay: 1.4s; 
animation-delay: 1.4s; 
z-index: 2; 
} 
.img-wrapper:hover img{ 
-webkit-animation-play-state: running; 
-moz-animation-play-state: running; 
-o-animation-play-state: running; 
-ms-animation-play-state: running; 
animation-play-state: running; 
} 



@-webkit-keyframes showMe { 
0% { visibility: visible; z-index: 100; } 
12.5% { visibility: visible; z-index: 100; } 
25% { visibility: hidden; z-index: 0; } 
100% { visibility: hidden; z-index: 0; } 
} 

@-moz-keyframes showMe { 
0% { visibility: visible; z-index: 100; } 
12.5% { visibility: visible; z-index: 100; } 
25% { visibility: hidden; z-index: 0; } 
100% { visibility: hidden; z-index: 0; } 
} 

@-o-keyframes showMe { 
0% { visibility: visible; z-index: 100; } 
12.5% { visibility: visible; z-index: 100; } 
25% { visibility: hidden; z-index: 0; } 
100% { visibility: hidden; z-index: 0; } 
} 

@-ms-keyframes showMe { 
0% { visibility: visible; z-index: 100; } 
12.5% { visibility: visible; z-index: 100; } 
25% { visibility: hidden; z-index: 0; } 
100% { visibility: hidden; z-index: 0; } 
} 

@keyframes showMe { 
0% { visibility: visible; z-index: 100; } 
12.5% { visibility: visible; z-index: 100; } 
25% { visibility: hidden; z-index: 0; } 
100% { visibility: hidden; z-index: 0; } 
} 





</style> 

</head> 

<body> 
<!--Top Bar Starts--> 


<div class="img-wrapper" id="beachtrain"> 

<img src="btns/hover1.png" alt="image01"/> 
<img src="btns/hover2.png" alt="image02"/> 
<img src="btns/hover3.png" alt="image03"/> 
<img src="btns/hover1.png" alt="image04"/> 
<img src="btns/hover2.png" alt="image05"/> 
<img src="btns/hover3.png" alt="image06"/> 
<img src="btns/hover2.png" alt="image07"/> 
<img src="btns/hover3.png" alt="image08"/> 




</div> 











    <script> 
     $("#beachtrain").click(function() { 
    window.location.href = 'http://www.google.co.uk' 
}); 
    </script> 




</body> 
</html>

出典

2016-07-01 JAC

あなたは$（関数（であなたのjqueryのをラップする必要があります）{私はそれを修正することができますどのようにOK – Cruiser

をブロックしてください.... – JAC

が、私はまだホバーではなく、クリック可能で仕事をしたいです？ – JAC

：jQueryのでは、ショートカットでそれを行うことができます。あなたはそれを使用したくない場合は、これで行く：

<script> 
    var myElement = document.getElementById('beachtrain'); 
    myElement.addEventListener('click', function(e) { 
     window.location.href = 'http://www.google.co.uk' 
    }); 
</script>

あなたがこれを使用しただけではなく、あなたのbeachtrain要素リンクを作っているいずれかの理由がありますか？それが最もクリーンな解決策になるだろう。例えば以下を参照してください：

<a href="http://www.google.co.uk" class="img-wrapper" id="beachtrain" style="display:block;"> 
    <img src="btns/hover1.png" alt="image01"/> 
    <img src="btns/hover2.png" alt="image02"/> 
    <img src="btns/hover3.png" alt="image03"/> 
    <img src="btns/hover1.png" alt="image04"/> 
    <img src="btns/hover2.png" alt="image05"/> 
    <img src="btns/hover3.png" alt="image06"/> 
    <img src="btns/hover2.png" alt="image07"/> 
    <img src="btns/hover3.png" alt="image08"/> 
</a>

出典

2016-07-01 16:22:08 will

私はこの1つを試してみたが、それは動作しませんでした。私はホバーにもっとして1枚の画像をフェードインすることを画像としてスタートしました...しかし、私は01を作る時画像にホバー効果はもう効きません....新しいURLへの転送はしますが効果はありません。したがって、私は別の方法を使用してみてください.... – JAC

divを数回クリックすると実際に動作します....ある時点でURLに転送されます。任意のアイデア....私はあなたの助けに感謝します。 – JAC

私はimg-wrapperをリンクに変更することを意味します。私はそれを試してみました。他のスニペットについては上記を参照してください。興味深い – will

はdocument.readyブロック内のスクリプトコードを入れてみてください。私はあなたがちょうどそれを残しますが、一番下のスクリプトはjqueryのを使用していると、あなたはjqueryのは含まれていないかどうかわからないんだけど

$(function(){ 
    $('#beachtrain').click(function(){ 
     // your code 
    }); 
});

出典

2016-07-01 16:20:58 Cruiser

質問を投稿するにはどうすればいいですか？ – JAC

申し訳ありませんが本当にこれに新しいです – JAC

あなたのおかげで助けてください – JAC

複数の画像スライダーをホバー上でクリックできないonClick（）

答えて

関連する問題