javascript - 在鼠标输入时突出显示图像

Question

我有 4 张图片，它们将作为新闻文章的缩略图。当用户将鼠标移到我希望它突出显示的图像之一上时。我通过在图像上放置一个相同大小的 div 来完成此操作。然后我尝试使用 JQuery 在鼠标输入时向该 div 添加一个类，这将使它稍微透过蓝色框可见，如图所示 here .

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 后哭了，我正在努力学习它，所以我真的不知道自己在做什么。

提前致谢:)

Answer 1

为什么不用js的纯css做呢？

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