Question

我知道如何为图像添加边框，但是如何在图像悬停/鼠标悬停上更改边框的颜色，我想在同一页面上显示多个图像，到目前为止我找不到这是一个插件。

我花了5个小时寻找插件才能做到这一点，感受到我的痛苦!!!

基本上，我希望图像能够完成按钮的功能。当用户将鼠标悬停在按钮上时，边框的颜色会发生变化。

Answer 1

您可以使用以下css

＆＃13;

img {
  border:2px solid #000;
}
img:hover {
  border:2px solid tomato;
}

＆＃13;

<img src="http://via.placeholder.com/350x150" alt="">

＆＃13;

使用阴影悬停效果

＆＃13;

img {
  box-shadow:0px 0px 0px #000;
}
img:hover {
  box-shadow:0px 0px 5px #000;
}

＆＃13;

<img src="http://via.placeholder.com/350x150" alt="">

＆＃13;

Answer 2

您可以使用:hover伪相选择器：

img:hover {
  border-color: red;
}

此外，如果您希望它像按钮一样，请考虑以下样式：

img {
  cursor: pointer;
}
img:active {
  border-color: blue;
}

img {
  border: 2px solid black;
  cursor: pointer;
}
img:hover {
  border-color: red;
}
img:active {
  border-color: blue;
}

<img src="http://via.placeholder.com/150x150" alt="">
<img src="http://via.placeholder.com/150x150" alt="">
<img src="http://via.placeholder.com/150x150" alt="">

使用box-shadow同样简单：

img {
  border: 2px solid black;
  cursor: pointer;
}
img:hover {
  box-shadow: 0 0 6px black;
}
img:active {
  box-shadow: 0 0 6px blue;
}

<img src="http://via.placeholder.com/150x150" alt="">
<img src="http://via.placeholder.com/150x150" alt="">
<img src="http://via.placeholder.com/150x150" alt="">

要使图像更大一些，请使用transform: scale(1.1);

img {
  border: 2px solid black;
  cursor: pointer;
}
img:hover {
  box-shadow: 0 0 6px black;
  transform: scale(1.1);
}
img:active {
  box-shadow: 0 0 6px blue;
}

<img src="http://via.placeholder.com/150x150" alt="">
<img src="http://via.placeholder.com/150x150" alt="">
<img src="http://via.placeholder.com/150x150" alt="">

Answer 3

在悬停

上为所有图像添加1px红色边框

＆＃13;

img:hover {
  border:1px solid #C04848;
}

＆＃13;

<img src="https://unsplash.it/300/200">

＆＃13;

Answer 4

尝试

<style>
  img:hover { 
     border: 1px solid black; 
  }
</style>

您可以在css中使用伪类悬停执行相同的操作

如果您需要任何进一步的帮助，请告诉我

Answer 5

使用:hover伪类。

img
{
  border: 10px solid yellow;
}

img:hover
{
  border-color:red;
}

JSfiddle

Answer 6

试试这个： -

.image_class:hover{ border:1px solid #0f0; }

这里image_class是你的img标签上的类

Answer 7

您可以使用大纲

.imgclass:hover {
   outline: 1px solid red;
}

这样你就不会有其他元素的移动或珊瑚

Answer 8

如果要在悬停元素时添加边框，则：

<style>
.nameofclass:hover {
border: 1px solid red;
}
</style>

上面的CSS将应用1px宽度的红色边框。将nameofclass更改为元素的名称，例如您尝试添加效果的图片/按钮。

注意： <style>标记中添加了<head>标记。类似的东西：

<head>
    <style>
    .nameofclass:hover {
    border: 1px solid red;
    }
    </style>
</head>

我希望如果您需要帮助，请随时提出帮助。

更新：使用以下代码添加框阴影！

-webkit-box-shadow: 3px 3px 18px 3px rgba(0,0,0,0.91) ; box-shadow: 3px 3px 18px 3px rgba(0,0,0,0.91) ;

在这个答案中，只需将其粘贴到我之前给你的代码下。

如何在图像悬停/ mousover上更改边框颜色？

8 个答案: