如果鼠標移到圖片上，該怎么辦？ 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

使用CSS類：

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

.myClass:hover {
    //css effects here
}

:hover僅在將鼠標懸停在元素上時適用，因此您可以在此處放置效果。

Answer 2

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 .hover的更多功能api.jQuery文檔

編輯代碼：

<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 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/

編輯試試這個：

<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>

因此， img``idem when you leave img時，在img alert顯示源上img``idem when you leave img``idem''

或者您可以使用： hover

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

Answer 4

無需JS，您可以輕松做到這一點。

一些提示：

• 將類添加到和
• 在其中添加另一個具有博客名稱的div。

首先用CSS隱藏博客名稱。 當您將鏈接懸停時，顯示博客名稱。 為了使它更加精美，將鼠標懸停在鏈接上時，在圖像上添加一個css3過濾器。

<a href="#" class="link">
  <img src="https://secure.img-shopto.net/ShopToMedia/images/shoptonews/2016/01/50531-hm.jpg" alt="gaming" class="image" />
  <div class="blog">Gaming</div>
</a>

CSS：

.image {
  // make sure the image fits inside the .link
  width: 100%;
  height: auto;
}

// the name of the blog
.blog {
  // hide it by default
  display: none;

  // position it above the image
  position: absolute;
  top: 50%;
  width: 100%;


  text-align: center;
  color: #fff;
  font-size: 15px;
}

// dimensions of the link
.link {
  position: relative;

  width: 200px;
  height: 200px;

  display: inline-block;
}

// when hovering the link, display .blog
.link:hover .blog {
  display: block;
}

// when hovering the link, make the image brighter
.link:hover .image {
  // http://caniuse.com/#feat=css-filters
  filter: contrast(1.2);
  -webkit-filter: contrast(1.2);
}