Эффект наведения на 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>

Если у вас есть хорошая идея, чтобы сделать это изображение более привлекательным или более эффектным при наведении, помогите. Я создам функцию 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>

---

ТАКЖЕ - Вы можете даже добавить закругленные границы, чтобы сделать его более эстетичным с помощью кнопки 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

Я надеюсь, что это соответствует вашим потребностям.

Answer 2

Я использовал: hover удалил :: hover, поместил прозрачную границу, чтобы он не прыгал, и использовал переход, чтобы он плавно двигался внутрь и наружу при наведении.

.pa-img, .img-div{
    cursor:pointer;
    border:1px transparent solid;
}
.img-div:hover{
    border:1px solid red;
    transition:ease-in-out.3s;
}
.pa-img:hover{
    border:1px solid red;
    transition:ease-in-out.3s;
}

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

</div>

Answer 3

Вы можете просто добавить прозрачную рамку, чтобы удалить прыжки. С простыми переходами это меньше в вашем лице.

.pa-img, .img-div{
  cursor:pointer;
  border: 1px solid transparent;
  transition: border .2s ease-in-out;
}
.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>

Answer 4

Используйте это, отступ 1px только для того, чтобы изображение не прыгал при добавлении границы.

.pa-img{
    padding: 1px;
}
.pa-img:hover{
    padding: 0;
    border:1px solid red;
}