html - div 和图像上的悬停效果在 css 中不起作用

Question

我有一个包含图像的 div [并且图像用于按钮的目的]。我想让 div 或 img 更方便用户使用。为此，我尝试在将鼠标悬停在其上时创建一个边框。但它不起作用。请看我的代码

.pa-img, .img-div{
  cursor:pointer;
}
.img-div:hover {
  border:1px solid red;
}
.pa-img:hover {
  border:1px solid red;
}

<div class="img-div">
  <img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" />
</div>

如果您有任何好的想法可以使此图像更具吸引力或在悬停时产生更多效果，请提供帮助。我将为 mage click 创建一个 jquery 函数。

但目前用户无法识别这是一个按钮。他们没有点击图像。这就是为什么我尝试制作悬停效果的原因

Answer 1

如果您想让它更人性化、更美观，请确保您也了解一些有关设计的知识，而不仅仅是编码。

这里有一种让它更美观的方法:

.img-div {
    width: 234px;
    padding: 10px;
}
.pa-img, .img-div{
    cursor:pointer;
    border:1px transparent solid;
}
.img-div:hover{
    transition:ease-in-out 0.2s;
    box-shadow: inset 0px 0px 15px;
}
.pa-img:hover{
    transition:ease-in-out 0.2s;
}

<div class="img-div">
<img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" />

</div>

---

另外 -您甚至可以添加圆 Angular 边框，使其更符合 PayPal 按钮的美学要求:

.img-div {
    width: 234px;
    padding: 10px;
    border-radius: 25px;
}
.pa-img, .img-div{
    cursor:pointer;
    border:1px transparent solid;
}
.img-div:hover{
    transition:ease-in-out 0.2s;
    box-shadow: inset 0px 0px 15px;
}
.pa-img:hover{
    transition:ease-in-out 0.2s;
}

<div class="img-div">
<img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" />

</div>

如果您希望图像也稍微偏向一边和向下以更像按钮一样工作，您可以这样做:

.img-div {
    width: 234px;
    padding: 10px;
    float: left;
}
.pa-img, .img-div{
    cursor:pointer;
    border:1px transparent solid;
}
.img-div:hover{
    transition:ease-in-out 0.2s;
    box-shadow: inset 0px 0px 15px;
}
.pa-img:hover{
    transition:ease-in-out 0.2s;
    margin-left: 2px;
    margin-top: 2px;
}

<div class="img-div">
<img class="pa-img" src="https://i.ibb.co/ymCFbTJ/pay-paypal.png" />

</div>

要制作圆 Angular 边框，只需在 .img-div 上添加 border-radius: 25px;(或您喜欢的任何值)

希望它能满足您的需求。