Question

您好，我在代码中添加了卡的悬停效果。（Ex）如果用户将鼠标悬停在卡片上。会显示卡阴影效果和“添加到购物车”按钮。但是，当用户将鼠标悬停在按钮上时，我必须显示卡的阴影效果。所以请告诉我该怎么做。在这里，我提到了我的HTML代码及其CSS。

score = 0
[1,2,4,3,5,6,1,1,1]

[2,4,3,5,6]
score += 1

Answer 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/

Answer 2

尝试一下：

$(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%3AANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    </div>
    <div class="btn-space">
        <span class="button-space ">
            <button type="button" class="addtocart-btn ">ADD TO CART </button>
        </span>
    </div>
</div>

Answer 3

选中此复选框可让我知道您是否要更改任何内容。谢谢

/* 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%3AANd9GcT05KW2maV5ZFB9ipDuXxFCg55Rwb6Grx3iiURgsOFMpWwWX27u" />
    <!-- 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 个答案: