при наведении курсора мыши на карточку кнопки должен отображаться эффект тени

ProgramBox

при наведении курсора мыши на карточку кнопки должен отображаться эффект тени

Post author:admin
Запись опубликована:30 января, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Привет, в моем коде я добавил эффект наведения для карты. (Например) если пользователь наведет курсор на карту. отобразится эффект тени карточки и кнопка Добавить в корзину. Но когда пользователь наведет курсор мыши на кнопку, я должен отобразить эффект тени карты. поэтому, пожалуйста, скажите мне, как это сделать. здесь я упомянул свой Html-код и его CSS.

 /* overallCart */
.overallCart{
  min-height: 272.5px;
}

/* card */
.card5-diagonal {
  border-color: transparent;
  width: 170px;
  height: 247.5px;
  margin-top: 0px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
}
/* card overeffect */
.card5-diagonal:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* image*/
.card5-image {
  width: 144px;
  height: 122px;
  margin-right: 13px;
  margin-left: 13px;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Over Button space*/
.button-space {
  display: none;
}
/* Over Button hover effect */
.overallCart:hover .button-space {
  display: block;
}
/* Button */
.addtocart-btn {
  min-width: 170px;
  max-width: 170px;
  min-height: 25px;
  max-height: 25px;
  background-color: #212121;
  color: #FFFFFF;
  font-family: RR;
  font-size: 12px;
  outline: none;
  border: #212121;
}

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
 
 
 <div class="overallCart">
  <div class="card card5-diagonal">

    <!-- Image Start -->
    <img class="card5-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    <!-- Image End -->
 
  </div>
  <!-- Footer Start -->
  <div class="btn-space">
    <span class="button-space ">
      <button type="button" class="addtocart-btn ">ADD TO CART </button>
    </span>
  </div>
  <!-- Footer End -->
</div>

1. что вы хотите, чтобы мы сделали ??.. кнопка «Добавить в корзину» отображается только при наведении курсора мыши на карточку?

2. @XenioGracias при наведении курсора мыши на кнопку Добавить в корзину должен отображаться эффект тени карточки.

3. все card . будет ли внутри overallCart ?

4. этот css .card5-diagonal должен выделяться.

Ответ №1:

Вы можете сделать это с помощью jQuery

 $('.addtocart-btn,.card5-diagonal').hover(function(){
    $('.card5-diagonal').css('box-shadow','0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)');
}, function(){
    $('.card5-diagonal').css('box-shadow','inherit');
});

и удалите это из CSS.

 /* card overeffect */
.card5-diagonal:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

ДЕМОНСТРАЦИЯ
https://jsfiddle.net/Ls9eju6y /

Ответ №2:

проверьте это, дайте мне знать, если вы хотите что-то изменить. Спасибо

 /* overallCart */

.overallCart {
  min-height: 272.5px;
  width: 25%;
}


/* card */

.card5-diagonal {
  border-color: transparent;
  width: 170px;
  height: 247.5px;
  margin-top: 0px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
}


/* card overeffect */

.card5-diagonal:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 100%;
}


/* image*/

.card5-image {
  width: 144px;
  height: 122px;
  margin-right: 13px;
  margin-left: 13px;
  margin-top: 15px;
  margin-bottom: 15px;
}


/* Over Button space*/

.button-space {
  display: none;
}


/* Over Button hover effect */

.overallCart:hover .button-space {
  display: block;
}


/* Button */

.addtocart-btn {
  min-width: 170px;
  /* max-width: 170px; */
  min-height: 25px;
  max-height: 25px;
  background-color: #212121;
  color: #FFFFFF;
  font-family: RR;
  font-size: 12px;
  outline: none;
  border: #212121;
  width: 100%;
}

.card {
  width: 100%;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>


<div class="overallCart">
  <div class="card card5-diagonal">

    <!-- Image Start -->
    <img class="card5-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    <!-- Image End -->

  </div>
  <!-- Footer Start -->
  <div class="btn-space">
    <span class="button-space ">
      <button type="button" class="addtocart-btn ">ADD TO CART </button>
    </span>
  </div>
  <!-- Footer End -->
</div>

Ответ №3:

Попробуйте это:

 $(document).ready(function () {
    $(".btn-space").hover(function () {
        $(this).prev().css("box-shadow", "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)");
    }, function () {
        $(this).prev().css("box-shadow", "");
    });
});

 .overallCart {
    min-height: 272.5px;
    width: 25%;
}
        
.card5-diagonal {
    border-color: transparent;
    width: 170px;
    height: 247.5px;
    margin-top: 0px;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}

.card5-diagonal:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
}

.card5-image {
    width: 144px;
    height: 122px;
    margin-right: 13px;
    margin-left: 13px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.button-space {
    display: none;
}

.overallCart:hover .button-space {
    display: block;
}
.addtocart-btn {
    min-width: 170px;
    /* max-width: 170px; */
    min-height: 25px;
    max-height: 25px;
    background-color: #212121;
    color: #FFFFFF;
    font-family: RR;
    font-size: 12px;
    outline: none;
    border: #212121;
    width: 100%;
}
.card {
    width: 100%;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
    
<div class="overallCart">
    <div class="card card5-diagonal">
        <img class="card5-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    </div>
    <div class="btn-space">
        <span class="button-space ">
            <button type="button" class="addtocart-btn ">ADD TO CART </button>
        </span>
    </div>
</div>

1. В моем случае я должен заменить момент a на b и b на a, это не сработало.

2. @Sudharsan Venkatraj проверьте код редактирования, jQuery работает с .prev() поэтому, если вы наведете курсор мыши на одну карту, будет выделена только одна карта