html - 在 DIV 框上叠加悬停效果和 href 的方法？

标签 html css hover href division

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

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

让这变得困难的是我将它定位在页面的不同区域，而原始代码在这种情况下似乎不起作用。我已经尝试了大部分我能想到的方法，而不必完全重试并拆除我一直在使用的所有代码。就目前而言，我根本无法让 DIV 周围的悬停 Action 或链接使用react。

我一直在使用的将每个 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 标记。不要尝试在 anchor 中添加 anchor !它不起作用。 此外，您还错过了悬停在 blockz、blocka、blockb 和 blockc 上的样式。这就是为什么没有悬停效果影响它们的原因。 查看更新的 fiddle 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 - 在 DIV 框上叠加悬停效果和 href 的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50422314/

上一篇：<ul> 标签淡入的 HTML5 CSS3 过渡

下一篇：html - 为什么位置为 :absolute have no height? 的图像当我在浏览器中看到它有高度时

相关文章：

html - ASP :Textbox width

css - 我的 iPhone 认为它是 980px 宽

html - 悬停时如何更改很多img

html - 为什么将鼠标悬停在链接上时会留下部分 css 悬停颜色？

html - 如何访问多行中的每四个元素？

html - <p> 当文本超出宽度时，换行继续

html - div 上的 CSS3 滚动条样式

html - 如何从此 html 中删除文本

html - Chrome 动画使文本模糊

jquery - 我怎样才能得到 :hover state for jCarousel arrows to work?

©2024 IT工具网  联系我们