Question

我正在尝试构建一个左侧面板来导航网站;并遇到一点问题。我最初使用CSS来创建面板上的按钮（欢迎，服务，产品组合，常见问题和联系方式），但在它下面我还想要一些Affiliation链接，那些是带有附属标识的图像。

这是一张适合您的图片。

当我使用CSS创建按钮时，我能够使用：hover来改变背景颜色，但我无法在背景中垂直居中，我无法做到让它在重新调整大小时停止剪裁。

所以我尝试创建图片来替换它，但现在我想要a：悬停以替换welcome.png w / welcome2.png，这样它会在悬停时使背景变暗。

以下是代码：

  <div class="leftpanelPics">  
        <a id="change" href="#" > <img src="images/nav/welcome.png"> </a>
        <a id="change" href="services.html"><img src="images/nav/services.png"></a>
        <a id="change" href="portfolio.html"><img src="images/nav/portfolio.png"></a>
        <a id="change" href="faq.html"><img src="images/nav/faq.png"></a>
        <a id="change" href="contact.html"><img src="images/nav/contact.png"></a>
  </div>

<p class="text text-1"><span>Affiliations:</span></p>

 <div class="leftpanelPics">
        <a href="https://www.findmyorganizer.com/"><img src="images/logos/FMO_Logo.png"></a>
        <a href="http://www.iocp.org/"><img src="images/logos/IOCP_Logo.png"></a>    
        <a href="https://www.stjude.org/"> <img src="images/logos/St_Jude_Logo.png"></a>     
</div>


 <p class="text text-1"><span>Social Media:</span></p>
<div class="socialmedia">
            <a href="https://www.twitter.com/"> <img src="images/socialmedia/twitterlogo.png"></a>
            <a href="https://www.facebook.com/"> <img src="images/socialmedia/facebooklogo.png"></a>
            <a href="https://www.instagram.com/"> <img src="images/socialmedia/instagramlogo.png"></a>                
            <a href="https://www.pinterest.com/"> <img src="images/socialmedia/pinterestlogo.png"></a>
            <a href="https://www.linkedin.com/"> <img src="images/socialmedia/linkedinlogo.png"></a>
</div>

`

非常感谢任何帮助。

由于

修改的

CSS：

.leftpanel {
  position: relative;
  float: left;
  clear: both;
  z-index: 10;
  width: 20.4%;
  height: 1199px;
  margin-left: 10%;
  vertical-align: middle;


}

.leftpanel .text {
  min-height: 14px;
  margin-left: 6.5%;
}


.body a.leftpanelPics:hover {
    color: darkcyan;
    width: 150%;
}

.leftpanelPics {
  float: left;
  clear: both;
  width: 68%;
  height: auto;
   margin: 7px 0 0 13%;


 }
.leftpanelPics img{
    width: 100%;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
     border: 1px #0d1e6e solid;
    box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}




.leftpanel {
  position: relative;
  float: left;
  clear: both;
  z-index: 10;
  width: 20.4%;
  height: 1199px;
  margin-left: 10%;
  vertical-align: middle;


}

.leftpanel .text {
  min-height: 14px;
  margin-left: 6.5%;
}


.body a.leftpanelPics:hover {
    color: darkcyan;
    width: 150%;
}

.leftpanelPics {
  float: left;
  clear: both;
  width: 68%;
  height: auto;
  margin: 7px 0 0 13%;


}
.leftpanelPics img{
    width: 100%;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px #0d1e6e solid;
    box-shadow: 0px -1px 20px rgba(0,0,0,.9);
}

Answer 1

要在img上创建a:hover的翻转，您可以这样做：

a:hover img {
  content:url("http://lorempicsum.com/futurama/255/200/2");
}

See working fiddle

但它并不是每个浏览器都完全兼容（一年前的最后一次编辑）。在SO上看到这个答案：

https://stackoverflow.com/a/11484688/6028607

另一种方法，更兼容的，就是在链接上使用伪元素悬停像这样

a { position: relative; display: inline-block; }
a:hover:before {
  content:""; 
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background:url("http://lorempicsum.com/futurama/255/200/2") no-repeat #fff;
}

See a working fiddle of this solution

Answer 2

您可能想要为链接本身创建一个类。例如

<a class="welcome" href="#" ></a>

CSS：

.welcome {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('images/nav/welcome.png') center top no-repeat;
}

.welcome:hover {
   background-image: url('images/nav/welcome2.png');
}

使用a的最佳方式：悬停以HTML格式切换图像？

2 个答案: