在卡片上添加不透明度，但在图标上禁用

Question

当我将鼠标悬停在卡片上并为其添加不透明度时，我试图显示一个图标，但我不想为图标添加不透明度

片段:

.cardrecipe_result{
cursor: pointer;
}
.cardrecipe_result i{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
color: #90CC57;
font-size: 25px;
display: none;
}
.cardrecipe_result:hover .card:not(i){
transition: visibility 0s, opacity 0.1s linear;
border: 2px solid #57CBCC;
opacity: 0.5;
}
.cardrecipe_result:hover .card-body{
}
.cardrecipe_result:hover i{
display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row">
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_108">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">budha bowl brocoli, carottes, radis</h5>
</div>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_142">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://static.colruyt.be/culinair/Folderrecepten%201316%20+%20WM1416/linzenschotel%20met%20kerriegroenten_MR.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">riz curry, lentilles, carottes</h5>
</div>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_122">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">velouté de carottes</h5>
</div>
</div>
</div>
</div>
</div>

如何移除悬停时加号图标的不透明度?

Answer 1

删除您拥有的额外div，并简单地针对除i以外的所有元素(注意选择器中使用空格)

.cardrecipe_result{
cursor: pointer;
}
.cardrecipe_result i{
top: 50%;
left: 50%;
position: absolute;
z-index:9;
transform: translate(-50%, -50%);
color: #90CC57;
font-size: 25px;
display: none;
}
.cardrecipe_result:hover .card :not(i){
transition: visibility 0s, opacity 0.1s linear;
opacity: 0.5;
}
.cardrecipe_result:hover .card {
border: 2px solid rgba(87,203,204,0.5); /* use rgba here since it won't be affected by opacity */
}
.cardrecipe_result:hover i{
display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row">
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_108">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">budha bowl brocoli, carottes, radis</h5>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_142">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://static.colruyt.be/culinair/Folderrecepten%201316%20+%20WM1416/linzenschotel%20met%20kerriegroenten_MR.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">riz curry, lentilles, carottes</h5>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_122">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">velouté de carottes</h5>
</div>
</div>
</div>
</div>

Answer 2

我的解决方案是将图标从card中移除，并给予图标position: absolute.