如何在DIV框上叠加悬停效果和href？

时间：2018-05-19 06:03:42

标签： html css hover href division

我的网站上有一个特定页面（http://thefloodplains.com/TheFloodSharkMain.html），我有6个DIV框，我希望可以点击这些框以将用户带到网站的其他区域。到目前为止，我已经能够用链接包装我在DIV中的标题文本。但是，我无法将DIV本身包装在链接中。每次我放一个href =＆＃34; ...＆＃34;在DIV盒子周围，没有任何反应。这可能与图像叠加在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盒子都是一个链接，并且当悬停时会逐渐消失为指定颜色的阴影过度。提前感谢您提供任何建议！

1 个答案:

答案 0 :(得分：1)

试试这个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;
}
相关问题
最新问题