【发布时间】：2021-04-22 08:28:26
【问题描述】：
我是编程初学者，我正在尝试创建具有悬停效果的卡片。将鼠标悬停在卡片上时，我想为卡片添加不透明度并显示 4 个按钮，一个在另一个之上。你能帮帮我吗？
下面是我的代码。
.cardnew {
height : 256px;
text-align : center;
width : 246px;
background : #ffffff;
margin : 20px;
display : inline-block;
box-shadow : 1px 1px 22px rgba(157, 184, 209, 0.19);
border-radius : 1px;
cursor : pointer;
transition : 0.15s linear;
}
.cardnew > img {
height : 150px;
width : 100%;
border-radius : 10px 10px 0 0;
padding : 35px 0 5px 0;
}
.cardnew > h1 {
font-size : 22px;
color : #5c5c5c;
padding : 15px 0 5px 0;
font-weight : 100;
}
.cardnew > p {
font-size : 13px;
color : #cdcdcd;
padding : 0 40px;
line-height : 20px;
}
.cardnew > a {
padding : 13px;
font-weight : normal;
width : 260px;
color : #2687f1;
border : 2px solid #2687f1;
border-radius : 7px;
margin : auto;
margin-top : 35px;
display : block;
transition : 0.2s linear;
}
.cardnew:hover {
transform : scale(1.015);
transition : 0.15s linear;
box-shadow : 1px 1px 22px rgba(157, 184, 209, 0.5);
}
.cardnew:hover > a {
padding : 13px;
width : 260px;
color : #fff;
background : #2687f1;
border-radius : 7px;
margin : auto;
margin-top : 35px;
transition : 0.2s linear;
}
.row-card {
justify-content : space-around;
flex-wrap : wrap;
margin-right : -12.5px;
margin-left : -12.5px;
}<div class="row-card">
<div class="cardnew">
<img src="https://enginehosting-html.fruitfulcode.com/wp-content/themes/enginehosting-html/assets/images/server.svg" style="padding: 60px 0 5px 0;height: 125px;" />
<h1>
name
</h1>
<p>firstname</p>
<div class="button"><a href="#"> BUTTON </a>
<div class="button"><a href="#"> BUTTON </a>
<div class="button"><a href="#"> BUTTON </a>
<div class="button"><a href="#"> BUTTON </a>
</div>
</div>我尝试了一些在 MDN 和 youtube 上找到的教程，但无法实现。任何帮助都会有很大帮助。 你能帮帮我吗？
【问题讨论】：
-
如果您想更改 opactiy，只需在悬停选择器中添加不透明度，例如
.cardnew:hover {opacity: 0.5;}，并删除transition声明，因为您已经在.cardnew选择器中进行了此操作 -
@iulo 你好，你好吗？我可以放置的不透明度，但是如何仅隐藏和显示悬停卡上的按钮？ 4 个按钮一个在另一个上方，以卡片为中心？
-
您可以使用 JS，addEventListener("mouseover", ...)，而不是当鼠标指针将在卡片内时，您可以更改按钮的显示。 w3schools.com/jsref/event_onmouseover.asp
-
不清楚你想做什么。我敢肯定，您的部分问题是您在选择器中使用了child combinator (
>)：.cardnew > a。如果链接是.cardnew的直接子级，则该选择器将匹配，但在您的 HTML 中，它们是.button元素的子级。在我看来，如果没有子组合器，您的所有代码都可以工作。事实上，我在this pen 所做的只是删除它们，看起来它可能更接近你想要的。 -
@Vince 这个，我想让按钮隐藏起来。并在卡片的悬停中以卡片的中心显示卡片内的按钮。我设法在卡片上设置了不透明度，但没有调整悬停时卡片中心的按钮。
标签： html css flexbox css-transitions