gpt4 book ai didi

html - 如何让应用程序出现在悬停在图像顶部时?

转载 作者:行者123 更新时间:2023-11-28 16:56:50 25 4
gpt4 key购买 nike

我知道重叠的问题已被多次回答,但是,我试图将文本放在图像的顶部,一旦悬停就居中。我尝试了 z-index,尝试了相对和绝对,决定寻求帮助。

.flex-container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding-left: 7%;
padding-right: 7%;
padding-top: 25px;
padding-bottom: 50px;
justify-content: center;

}
.flex-container div {
margin: 0;
position: relative;
margin-bottom: -5px;
font-size: medium;
text-align: center;
z-index: 0;
}

.flex-container div:hover {
filter: brightness(50%);
}

.flex-container div p {
display: none;
}

.flex-container div:hover p {
position: absolute;
color: black;
z-index: 1;
text-align: center;
}
<div>
<a href="Printing/menus.html">
<img src="../Images/menus-01.png" alt="Printing" style="width:100%; height:auto;"/>
</a>
<p>Menus</p>
</div>

最佳答案

您应该先设置文本 CSS,然后让悬停显示样式,另外,您忘记在代码中设置容器样式。

看看这是不是你想要的:

HTML:

<div class="container">
<img src="../Images/menus-01.png" alt="Image" style="width:100%;">
<div class="topTxt">Text on Center/div>
</div>

CSS:

.container {
position: relative;
text-align: center;
}

.topTxt {
position: absolute;
display: none;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
}

.container:hover .topTxt {
display: block;
}

使用 JavaScript :

document.getElementsByClass("container").addEventListener("mouseover", function() {
document.getElementsByClass("topTxt").style.display = "block";
});

获取以下代码片段以更好地了解您的请求:

#container {
max-width: 900px;
margin: 0 auto;
padding: 5px;
font-size: 0;
list-style: none;
background-color: #444;
}

#container li {
display: inline-block;
width: 25%;
vertical-align: middle;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.container-cells {
margin: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
display: block;
position: relative;
overflow: hidden;
}

.imgs {
display: block;
width: 100%;
height: auto;
border: none;
filter: brightness(100%);
transition: all 0.3s;
}

#container li:hover .imgs {
filter: brightness(50%);
}

.overlay {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 0px;
margin: auto;
background: #000;
background-size: 50px 50px;
transition: all 0.3s;
}

#container li:hover .overlay {
height: 30px;
}

.title {
display: block;
padding: 5px 30px;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
text-align: center;
font-size: 18px;
color: white;
opacity: 0;
transform: translateY(-20px);
transition: all .3s;
}

#container li:hover .title {
transform: translateY(0px);
opacity: 0.9;
}

@media (max-width: 9000px) {
#container li {
width: 25%;
}
}

@media (max-width: 700px) {
#container li {
width: 33.33%;
}
}

@media (max-width: 550px) {
#container li {
width: 50%;
}
}
<ul id="container">
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
<li>
<a class="container-cells" href="#">
<img class="imgs" src="https://www.madpaws.com.au/wp-content/uploads/2019/02/Raise-Your-Kitten-to-Use-the-Litter-Box-300x200.jpg">
<span class="overlay"></span>
<span class="title">Hello World !</span>
</a>
</li>
</ul>

你只需要将文字放在图片之前,因为无论哪种方式图片都是背景,只需在前面添加文字,那么图片和文字将是 sibling ,而不是 parent 和 child ,所以效果悬停不会影响 child ,因此,文本颜色将保持不变,而不会对其应用过滤器。

关于html - 如何让应用程序出现在悬停在图像顶部时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56246293/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com