我的网站上有一个特定页面（http://thefloodplains.com/TheFloodSharkMain.html），其中有6个DIV框，我想单击这些框将用户带到网站的其他区域。到目前为止，我已经能够使用链接将DIV中包含的标题文本包装起来。但是，我无法将DIV本身包装在链接中。每次我在DIV框周围放置href =“ ...”时，都不会发生任何事情。这可能与以下事实有关：图像已覆盖在DIV上，但我不确定。
另外，由于我希望DIV具有链接并且可单击，因此我希望它们在悬停时淡入某种颜色（具有半透明的不透明度）。基本上，我希望此页面上的框与首页上的框完全相同：。
造成这种情况的原因是，我将其放置在页面的其他区域中，在这种情况下，原始代码似乎不起作用。我已经尝试了大多数我能想到的所有事情，而不必完全重试并删除我一直在使用的所有代码。就目前而言，我根本无法使DIV周围的悬停操作或链接做出反应。
我一直在使用的代码将每个DIV淡化为指定的颜色（在这种情况下为橙黄色阴影）看起来像这样：
.block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
}
这是我正在使用的整体CSS
h2 {
padding-bottom: 20px;
font-size: 40px;
margin-bottom: 10px;
color:#FF8B6F;
text-decoration-color: #FF8B6F;
}
h4.shoe {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #00A5D1;
color: #00A5D1;
}
a {
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
border-bottom: 1px dashed #FF8B6F;
text-decoration: none;
}
u {
border-bottom: 1px dashed #00A5D1;
text-decoration: none;
}
u:hover {
Color: #FF8B6F;
border-bottom: solid 2px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
padding-top: 15px;
}
.block {
flex: 0 0 33.1%;
height: 300px;
background-color: #00A5D1;
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
/* .block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
} */
x {
margin: auto;
text-align: center;
font-size: 85px;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
padding: 6px;
margin: 6px;
text-decoration-color:#00A5D1;
color:#00A5D1;
border-bottom: 2px solid #FFE097;
}
hr {
border: none;
height: 2px;
color: black;
background-color: #FFE097;
margin-bottom: 33px;
}
p {
color: black;
text-align: left;
width: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Buenard', Garamond, 'EB Garamond';
}
hr.two {
margin-bottom: 16px;
}
ul {
padding-bottom: 0px;
margin-bottom: 6px;
padding-top: 12px;
}
br {
padding-bottom: 6px;
}
li.pad {
padding-bottom: 6px;
margin-bottom: 6px;
}
div {
color: #00A5D1;
padding-top: 14px;
}
df {
text-decoration: inherit;
text-decoration: none;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
a.none {
text-decoration: none;
}
.blockx {
background-image: url('DownloadMusic2.png');
}
.blockx:hover {
background-color: #FFE097;
}
.blockx:after {
display: block;
background: #FFE097;
opacity: 0;
}
.blockx:hover:after {
opacity: .5;
}
.blocky {
background-image: url('EPKIcon2.png');
background-position: center center;
}
.blocky:hover {
background-color: #FFE097;
}
.blockz {
background-image: url('StreamAudio.png');
}
.blocka {
background-image: url('VideoStream.png');
background-position: center center;
}
.blockb {
background-image: url('ContactIcon.png');
}
.blockc {
background-image: url('Handshake2.png');
}
这是网页的HTML：
<body>
<a class="btn" href="http://thefloodplains.com/"></a>
<center><x>The FloodShark</x></center>
<br>
<center><df href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo.jpg" style="text-decoration: none;"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo-1024x585.jpg" style="margin-top: 0px; margin-bottom: 2px; padding-bottom: 6px" alt="floodshark-cropped-william-luo" width="856" height="480" class="alignnone size-large wp-image-228" padding-bottom="2px;" /></img></df></center>
<hr>
<p><b>The FloodShark:</b> A Florida-based producer/composer turned carnivorous, fresh-water tolerant, cold-blooded, cartilaginous predator surfing the sonic waves with an eclectic musical style</p>
<center><div class="container flex-container">
<a href="TheFloodSharkDownloads.html" title="Free downloads of The FloodShark's discography"><div class="block blockx"><a href="TheFloodSharkDownloads.html"><h4 class='shoe'><u>Downloads</u></h4></a></div></a>
<a href="EPK.html" title="EPK"><div class="block blocky"><a href="EPK.html"><h4 class='shoe'><u>EPK</u></h4></a></div></a>
<div class="block blockz"><a href=""><h4 class='shoe'><u>Stream Audio</u></h4></a></div>
<div class="block blocka"><a href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos"><h4 class='shoe'><u>Stream Video</u></h4></a></div>
<div class="block blockb"><a href="Contact-Social.html"><h4 class='shoe'><u>Contact</u></h4></a></div>
<div class="block blockc"><a href="Contribute-Support.html"><h4 class='shoe'><u>Contribute / Support</u></h4></a></div>
</div></center>
<br>
</body>
因此，基本上，我希望能够原样使用这些框，但是我希望这样做，以便每个框的整个DIV框都是一个链接，并且在悬停时会淡入指定颜色的阴影。预先感谢您提供任何建议！
最佳答案
试试这个html标记。不要尝试在锚点内添加锚点！它不起作用。
另外，您也错过了在blockz，blocka，blockb和blockc上悬停的样式。这就是为什么没有悬停效果影响他们的原因。
查看更新的小提琴https://jsfiddle.net/owvs550p/4/
<a class="btn" href="http://thefloodplains.com/"></a>
<center>
<x>The FloodShark</x>
</center>
<br>
<center>
<df href="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo.jpg" style="text-decoration: none;"><img src="http://www.thegrassrootsgarage.com/wp-content/uploads/2016/02/FloodShark-cropped-William-Luo-1024x585.jpg" style="width:100%;margin-top: 0px; margin-bottom: 2px; padding-bottom: 6px" alt="floodshark-cropped-william-luo" width="856" height="480" class="alignnone size-large wp-image-228" padding-bottom="2px;" /></img>
</df>
</center>
<hr>
<p><b>The FloodShark:</b> A Florida-based producer/composer turned carnivorous, fresh-water tolerant, cold-blooded, cartilaginous predator surfing the sonic waves with an eclectic musical style</p>
<center>
<div class="container flex-container">
<a href="TheFloodSharkDownloads.html" class="block" title="Free downloads of The FloodShark's discography">
<div class="block blockx">
<h4 class='shoe'><u>Downloads</u></h4>
</div>
</a>
<a href="EPK.html" class="block" title="EPK">
<div class="block blocky">
<h4 class='shoe'><u>EPK</u></h4>
</div>
</a>
<a href="" class="block">
<div class="block blockz">
<h4 class='shoe'><u>Stream Audio</u></h4>
</div>
</a>
<a class="block" href="https://www.youtube.com/channel/UCrcvj6Q-V4S-xad_Y_gPTFw/videos">
<div class="block blocka">
<h4 class='shoe'><u>Stream Video</u></h4>
</div>
</a>
<a href="Contact-Social.html" class="block">
<div class="block blockb">
<h4 class='shoe'><u>Contact</u></h4>
</div>
</a>
<a href="Contribute-Support.html" class="block">
<div class="block blockc">
<h4 class='shoe'><u>Contribute / Support</u></h4>
</div>
</a>
</div>
</center>
<br>
的CSS
h2 {
padding-bottom: 20px;
font-size: 40px;
margin-bottom: 10px;
color:#FF8B6F;
text-decoration-color: #FF8B6F;
}
h4.shoe {
font-size:36px;
font-style: bold;
text-align:center;
font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
text-decoration-color: #00A5D1;
color: #00A5D1;
}
a {
border-bottom: dashed 1px;
text-decoration-color: #FF8B6F;
border-bottom: 1px dashed #FF8B6F;
text-decoration: none;
}
u {
border-bottom: 1px dashed #00A5D1;
text-decoration: none;
}
u:hover {
Color: #FF8B6F;
border-bottom: solid 2px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
padding-top: 15px;
}
.block {
flex: 0 0 33.1%;
height: 300px;
background-color: #9100ff;
background-position: center center; /* center the image in the div */
background-size: cover; /* cover the entire div */
background-repeat: no-repeat;
background-size: 100%;
border: 1px solid #FF8B6F;
/* align-items: center;
justify-content: center; */
text-align: center;
}
/* .block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: .5;
} */
x {
margin: auto;
text-align: center;
font-size: 85px;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
padding: 6px;
margin: 6px;
text-decoration-color:#00A5D1;
color:#00A5D1;
border-bottom: 2px solid #FFE097;
}
hr {
border: none;
height: 2px;
color: black;
background-color: #FFE097;
margin-bottom: 33px;
}
p {
color: black;
text-align: left;
width: 100%;
max-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: 'Buenard', Garamond, 'EB Garamond';
}
hr.two {
margin-bottom: 16px;
}
ul {
padding-bottom: 0px;
margin-bottom: 6px;
padding-top: 12px;
}
br {
padding-bottom: 6px;
}
li.pad {
padding-bottom: 6px;
margin-bottom: 6px;
}
div {
color: #00A5D1;
padding-top: 14px;
}
df {
text-decoration: inherit;
text-decoration: none;
}
.Row
{
display: table;
width: 100%; /*Optional*/
max-width: 960px;
table-layout: fixed; /* Optional*/
border-spacing: 10px; /* Optional */
margin-left: auto;
margin-right: auto;
}
a.none {
text-decoration: none;
}
.blockx {
background-image: url('DownloadMusic2.png');
}
.blockx:hover {
background-color: #FFE097;
}
.blockx:after {
display: block;
background: #FFE097;
opacity: 0;
}
.blockx:hover:after {
opacity: .5;
}
.blocky {
background-image: url('EPKIcon2.png');
background-position: center center;
}
.blocky:hover {
background-color: #FFE097;
}
.blockz {
background-image: url('StreamAudio.png');
}
.blocka {
background-image: url('VideoStream.png');
background-position: center center;
}
.blockb {
background-image: url('ContactIcon.png');
}
.blockc {
background-image: url('Handshake2.png');
}
编辑
添加以下样式以使悬停效果正常工作
.block {
position: relative;
}
.block:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
background: #FFE097;
opacity: 0;
}
.block:hover:after {
opacity: 0.5;
}
关于html - 如何将悬停效果和href叠加在DIV框上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50422314/