鼠标输入时高亮显示图像

Highlighting images on mouse enter

本文关键字：显示图 图像 显示 高亮 输入 鼠标      更新时间：2023-09-26

我有4张图片，它们将是新闻文章的缩略图。当用户将鼠标移到其中一个图像上时，我希望它高亮显示。我通过在图像上放置一个相同大小的div来实现这一点。然后，我尝试使用JQuery在鼠标输入时向该div添加一个类，这将使其成为一个稍微透明的蓝色框，如图所示。

HTML:

<div class="col-5 parent-center">
    <div id="news1" class="news-highlight"></div>
    <img src="images/news.jpg" class="news-image"/>
</div>

我知道在JQuery中，我使用.content作为参考，可以更快地找到新闻图像的ID。这确实存在，我只是没有复制代码，因为这会导致很多与我的问题无关的代码被粘贴进去

CSS：

.news-image
{
    height: 100%;
    width: 90%;
    border: solid 2px #14a0dc;
}
.news-highlight
{
    height: 100%;
    width: 90%;
    position: absolute;
    background-color: #14a0dc;
    opacity: 0.6;
}

JQuery:

function highlightNews(newsDiv)
{
    newsDiv.addClass('news-highlight');
}
function unhighlightNews(newsDiv)
{
    newsDiv.removeClass('news-highlight');
}
$(document).ready(function()
{   
    var $content = $('.content');
    var $news1 = $content.find('#news-1');
    var $news2 = $content.find('#news-2');
    var $news3 = $content.find('#news-3');
    var $news4 = $content.find('#news-4');
    function newsMouse(newsDiv)
    {
        newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv));
    }
    newsMouse($news1);
    newsMouse($news2);
    newsMouse($news3);
    newsMouse($news4);
});

现在你可能在看到我的JQuery后哭了，我正在努力学习，所以我真的不知道自己在做什么。

提前感谢：）

为什么不使用纯css而不使用js呢？

.news-image
{
    height: 100%;
    width: 90%;
    border: solid 2px #14a0dc;
}
.news-image:hover
{
    height: 100%;
    width: 90%;
    position: absolute;
    background-color: #14a0dc;
    opacity: 0.6;
}
<div class="col-5 parent-center">
    <div id="news1" class="news-highlight"></div>
    <img src="images/news.jpg" class="news-image"/>
</div>

您可以使用纯CSS来完成此操作。基本上高亮显示只是悬停上的CCD_ 2或CCD_。

.news-image:hover{
   border:solid 1px red;
}

如果要使用JQuery执行类似操作，一个选项是使用hover和toggleClass

$('.news-image img').hover(function() {
  $(this).toggleClass('news-highlight');
});
.news-image {
  float: left;
  width: 33.3%;
  padding: 5px;
  box-sizing: border-box;
}
.news-image img{
  transition: all 0.3s ease-in;
  width: 100%;
}
.news-highlight {
  opacity: 0.6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-image">
  <img src="http://placehold.it/350x150">
</div>
<div class="news-image">
  <img src="http://placehold.it/350x150">
</div>
<div class="news-image">
  <img src="http://placehold.it/350x150">
</div>

如果我能正确理解你想要什么，你只需要在图像悬停时更改图像顶部的div颜色。这可以用CSS轻松完成。这应该有效：

.news-highlight
{
    background: rgba(51, 153, 255, 0);
}
.news-highlight:hover
{
    background: rgba(51, 153, 255, 0.5);
}

当用户将光标悬停在div上时，这将使其呈现半透明的蓝色，并且图像将显示出来。

您也可以同时将图像更改为灰度，这可能会提高效果。

编辑：我还应该说明，你需要将html的顺序更改为：

<div class="col-5 parent-center">
    <img src="images/news.jpg" class="news-image"/>
    <div id="news1" class="news-highlight"></div>
</div>

现在，.news高亮div将出现在img的顶部。

下面是jsFiddle悬停效果的工作原理。实践就是答案！jQuery对于这种简单的来说是不需要的

.news-image
{
    height: 100%;
    width: 90%;
    border: solid 2px #14a0dc;
}
.news-image:hover
{
    height: 100%;
    width: 90%;
    position: absolute;
    background-color: #14a0dc;
    opacity: 0.6;
}
相关文章：