マウスが画像上を移動したら、何かしますか？ Javascript Jquery

Question

私は自分のウェブサイトにいくつかのクールな効果を加えようとしています。今はユーザーがトピックを選択したいと思っています。今私は4つのトピックを持っていて、4つのクールな写真を見つけました。それらを「写真のリンク」として望みます。例：ユーザーが画像の上に彼のマウスを移動する場合

<a href="{{ action('Test\\TestController@add', [1]) }}"> 
    <img src="/pictures/Gaming.jpg" alt="Gaming" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [2]) }}"> 
    <img src="/pictures/Gesundheit.jpg" alt="Gesundheit" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [3]) }}"> 
    <img src="/pictures/Allgemeines.jpg" alt="Allgmeines" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [4]) }}"> 
    <img src="/pictures/Technik.jpg" alt="Technik" style="width:280px;height:228px;"> 
</a> 

は、今私は、のような何かをしたい

、その絵は、いくつかの明るいを取得する必要があり、その後、ブログの場合のような

の名前が書かれるべき私はマウスをゲーム画像上に動かすと、画像は明るくなり、中央にはゲームが立ち上がります。さて、私はまだjavascript/Jqueryを学んでいますが、このようなことはしませんでした。

誰かが私を助けることができますか？

ありがとうございました！

私の試み：

<script> 
    $(".imgClass") 
    .mouseenter(function() { 
    console.log("Enter to "+$(this)); 
    }) 
    .mouseleave(function() { 
    console.log("Leave to "+$(this)); 
    }); 
    </script> 

<a href="{{ action('Test\\TestController@add', [1]) }}"> 
     <img class=".imgClass" src="/pictures/Gaming.jpg" alt="Gaming" style="width:280px;height:228px;"> 
    </a> 

Answer 1

1）CSSソリューション

.someClass { 
    // mouse is not over div 
} 
.someClass:hover { 
    // mouse is over div 
} 

2）JSソリューション

<div id="myBox" onmousemove="myMoveFunction()"></div> 

<script> 
function myMoveFunction() { 
    document.getElementById("myBox").style.color = "blue"; //just a example 
} 
</script> 

3）

<div id="myBox" onmousemove="myMoveFunction()"></div> 

$("#myBox").hover(function() { 
    $(this).show(); //just a example 
}); 

が.hoverここでjQueryの周りの多くの機能を参照してくださいjQueryのソリューションapi.jQuery documentation

編集コード：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<h2 style="color: white">In welchem Themenbereich willst du einen Thread erstellen?</h2><br><br> 

<a href="{{ action('Test\\TestController@add', [1]) }}"> 
<img class="zoom" src="http://www.myfico.com/Images/sample_overlay.gif" alt="Gaming" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [2]) }}"> 
<img class="zoom" src="/pictures/Gesundheit.jpg" alt="Gesundheit" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [3]) }}"> 
<img class="zoom" src="/pictures/Allgemeines.jpg" alt="Allgmeines" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [4]) }}"> 
<img class="zoom" src="/pictures/Technik.jpg" alt="Technik" style="width:280px;height:228px;"> 
</a> 

<script> 
$(".zoom").hover( 
function() { 
    $(this).fadeTo("fast", 0.5) 
    $("#myCategory").show(); 
}, 
function() { 
    $(this).fadeTo("fast", 1) 
    $("#myCategory").hide(); 
}); 
</script> 

Answer 2

使用CSSクラス：マウスが要素の上に推移したとき、あなたがここにあなたの効果を置くことができるように

.myClass { 
    width:280px; 
    height:228px; 
} 

.myClass:hover { 
    //css effects here 
} 

:hoverのみ、適用されます。

Answer 3

Jqueryで

とmouseenterとmouseleave：

$(".someClass") 
    .mouseenter(function() { 
     console.log("Enter to "+$(this)); 
    }) 
    .mouseleave(function() { 
     console.log("Leave to "+$(this)); 
}); 

https://api.jquery.com/mouseleave/

https://api.jquery.com/mouseenter/

EDITこれを試してみてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<a href="{{ action('Test\\TestController@add', [1]) }}"> 
    <img src="/pictures/Gaming.jpg" class="test" alt="Gaming" style="width:280px;height:228px;"> 
</a> 

<a href="{{ action('Test\\TestController@add', [2]) }}"> 
    <img src="/pictures/Gesundheit.jpg" class="test" alt="Gesundheit" style="width:280px;height:228px;"> 
</a> 

<script> 
    $(".test") 
     .mouseenter(function() { 
      alert("Enter to img src "+$(this).attr("src")); 
    }) 
    .mouseleave(function() { 
     alert("Leave to img src "+$(this).attr("src")); 
    }); 
</script> 

01あなたは img``idem when you leave img`

のimgalertディスプレイソースに入力するか、またはあなたが使用することができたときに

だから：hover

$(".someClass").hover(function() { 
    alert("Hover on "+$(this).attr("src")); 
}); 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.