Question

我试图在我的网站上添加一些很酷的效果..现在我希望用户选择一个主题。现在我有4个主题，发现了4张很酷的图片，我想要它们作为＆＃34;图片链接＆＃34;。例如：

<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 here 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 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 alert img``idem when you leave img`

的显示来源时

或者您可以使用：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);
}

如果鼠标移动到图片上然后做某事？ Javascript Jquery

4 个答案: