javascript - 如果鼠标移到图片上然后做什么？ Javascript 查询

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) jQuery解决方案

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

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

查看有关 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>