我有一个包含图像的 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>如果您有任何好主意使此图像更具吸引力或对悬停效果更好，请提供帮助。我将为法师 click 创建一个 jquery 函数。
但目前用户无法识别这是一个按钮。他们没有点击图像。这就是为什么我尝试制作悬停效果
如果您想让它更加用户友好和美观，请确保您还了解一些有关设计的知识，而不仅仅是编码。
这是一种使它更美观的方法：
.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>此外 -您甚至可以添加圆形边框，使其与 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>要制作圆形边框，只需border-radius: 25px;在.img-div
我希望它符合您的需求。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句