小贝子编程

如何叠加悬停效果并在 DIV 框上 href?



我的网站上有一个特定的页面(http://thefloodplains.com/TheFloodSharkMain.html(，我有6个DIV框，我希望可以点击这些框将用户带到网站的其他区域。到目前为止，我已经能够用链接包装我在 DIV 中的标题文本。但是，我一直无法将 DIV 本身包装在链接中。每次我放一个 href="..."在DIV盒子周围，什么也没发生。这可能与图像被覆盖在 DIV 之上的事实有关，但我并不完全确定。

此外，由于我希望 DIV 具有链接并且可以单击，因此我希望它们在悬停在上方时淡化某种颜色(具有半透明不透明度(。基本上，我希望此页面上的框与首页上的框完全相同：。

使这变得困难的是，我将其放置在页面的不同区域，而原始代码在这种情况下似乎不起作用。我已经尝试了我能想到的几乎所有方法，而不必完全重试并拆除我一直使用的所有代码。就目前而言，我根本无法让 DIF 周围的悬停操作或链接做出反应。

我一直在使用的将每个 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;
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium