Question

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

HTML：

CREATE OR REPLACE PROCEDURE user_auth(
    userid IN st_az.st_name%type ,
    pass OUT st_az.st_pass%type ,
    message OUT varchar2 ,
    err_msg OUT varchar2  ) IS
BEGIN 
    message:= 'login is done successfully';
    err_msg:= 'Login Denied .. Please Try Again!';
    SELECT st_pass INTO  pass FROM st_az WHERE st_name = userid ;
    dbms_output.put_line(message);
EXCEPTION  
     WHEN LOGIN_DENIED  THEN 
     dbms_output.put_line(err_msg); 
END user_auth;

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

CSS：

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

JQuery的：

.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后可能会哭，我正试着在飞行中学习它，所以我真的不知道我在做什么。

提前致谢：）

Answer 1

为什么不用纯粹的css制作它而没有js？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用纯CSS来做到这一点。基本上突出显示的只是悬停上的box-shadow或border。

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

Answer 3

如果您想使用 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>

Answer 4

以下是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;
}

Answer 5

如果我理解你想要什么，你应该只需要在图像悬停时更改图像顶部的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-highlight div将显示在你的img上。

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

5 个答案: