我想使用
@media (hover: hover)
,但我无法使其工作。我在一行中有三个图片,当鼠标悬停在上面时,会显示文本叠加。目前,每当我添加@media (hover: hover)
并切换到移动视图时,图片保持不变。我要么想让@media (hover: hover)
起作用,要么尝试其他方法。这是我第一次设计网站并使用堆栈溢出,所以我有些力不从心。我没有看到已发布的任何问题与我的问题足够相似,可以帮助我实现我的目标。以下是我的CSS代码。 .card-container
{
margin-top: 10%;
}
.card-container h1
{
font-family: merriweather;
}
.card
{
position: relative;
overflow: hidden;
}
.card:before
{
position: absolute;
content: '';
width: 80%;
height: 220%;
background: rgba(217, 153, 35, 0.7);
top: -50%;
left: -100%;
z-index: 1;
transform: rotate(25deg);
transform-origin: center top 0;
transition: .5s;
}
.card:hover:before
{
left: 10%;
}
.card img
{
width: 100%;
height: auto;
}
.card-text
{
width: 100%;
padding: 0 20px;
position: absolute;
top: -100%;
color: #ffff;
left: 0;
z-index: 2;
transition: 1.1s;
}
.card-text h3
{
font-family: merriweather;
font-weight: 900;
}
.card-text h5
{
font-family: lora;
}
.card:hover .card-text
{
top: 80px;
}
@media (hover: hover)
,而应该使用@media (max-width: xxx)
。 - Amaury Hanser