HTML-Hoverbild: Erweitern Sie den anklickbaren Bereich über das Bild hinaus
Ich bin relativ neu in CSS/HTML. Ich habe mich schon eine Weile mit diesem Problem beschäftigt, aber keine Lösung gefunden.
Die Frage ist: Wenn ich den folgenden Code verwende (mit Bulma), was passiert, wenn die img3.jpg上悬停时，可点击区域是从第一个is-column / is-multilineKonflikte zwischen und den überschriebenen CSS-Definitionen , die ich bereitstelle, auftreten?
<style type="text/css">
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
</style>
<style>
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> 关于我们 </h3>
<hr>
<p align="left" style="font-size:120%;">
一些内容...
</p>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<img src="/images/img1.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<img src="/images/img2.jpg" alt="" class="image"/>
</div>
<div class="column is-4">
<div class="container">
<img src="/images/img3.jpg" alt="" class="image"/>
<div class="overlay">
<div class="text">你好，世界</div>
</div>
</div>
</div>
</div>
<p align="left" style="font-size:120%;">
一些文本...
<ul>
<li>
项目1
<a href="url1">
<b>链接</b>
</a>
</li>
<li>
项目2
<a href="url2">
<b>链接</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
Antworte allen(1)Ich werde antworten
P粉7383463802023-09-11 00:10:53
尝试这个文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<title>Document</title>
<style>
body {
padding-top: 2em;
}
ul {
list-style: none;
padding: 10px 10px 10px 30px
}
ul li {
font-size: 120%;
margin-left: 10px;
list-style-type: circle;
}
.container {
position: relative;
width: 100%;
}
.columns {
display: flex;
}
.image {
display: block;
width: 100%;
max-width: 320px;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.test {
position: absolute;
left: 0;
border-bottom: green solid;
font-size: .5em;
font-weight: bold;
}
.test-top {
top: 0;
}
.test-bottom {
bottom: 0;
}
</style>
</head>
<body>
<div class="columns is-multiline">
<div class="column is-9">
<div class="content">
<h3> 关于我们 </h3>
<hr>
<p style="font-size:120%; text-align:left">
一些内容...
</p>
</div>
<div class="columns is-multiline">
<p class="test test-top">开始 columns / is-multiline</p>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" />
</div>
<div class="column is-4">
<div class="container">
<img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" />
<div class="overlay">
<p class="test test-top">开始覆盖</p>
<div class="text">你好世界</div>
<p class="test test-bottom">结束覆盖</p>
</div>
</div>
</div>
<p class="test test-bottom">结束 columns / is-multiline</p>
</div>
<p style="font-size:120%; text-align:left">
一些文本...
<ul>
<li>
项目1
<a href="url1">
<b>链接</b>
</a>
</li>
<li>
项目2
<a href="url2">
<b>链接</b></a>
</li>
</ul>
</p>
</div>
<div class="column is-3">
{% include latest-posts.html %}
</div>
</div>
<hr>
</body>
</html>