Question

所以我有这个讨厌的问题，我无法摆脱。我通过SSI将我的菜单和标题信息插入到我的html中...以及menu.html页面（其中包含我的菜单）行为正确，这意味着菜单项下划线：悬停，因为它们应该和图像（组织） logo）不是因为

.imglink:hover{
background:none;
border-style:none;
}

我已插入...但是当我进入我的主页通过SSI拉入menu.html页面时，当调用：hover时，徽标下面有一行，即使我有上述代码在menu.css的css和homepage.css

中

任何想法？

这是menu.html页面的css：

ul#menu{
position:relative;
top:0px;
left:0px;
list-style: none;
margin:2px 0px 0px 0px;
padding:0px;
display:block;
float:left;
width:100%;
clear:both
}

ul#menu li {
float:left;
margin:5px 0px 5px 5px;
}

ul#menu li a:link,a:visited {
display:block;
float:left;
margin:2px;
background-color: #ffffff;
color:#000000;
font-weight:bold;
text-decoration:none;
font-size:.9em;
display:block;
text-align:center;
width:160px;
margin-bottom:0px;
}

ul#menu li a:hover {
color:#000000;
border-bottom:1.5px solid black;
}

ul#menu li a.active {
color:#000000;
background-color:#dbdbdb;
border:1.5px solid #000000;
border-top:none;
border-left:none;
border-right:none;
}

.imglink:hover{
background:none;
border-style:none;
}

这是我的html菜单：

<body>
<div id="wrapper">
<div class="header">
    <a href="/" class="imglink"><img class="logo" src="http://www.unifiedforuganda.com/resources/new%20u4u%20logo.jpg" alt="U4U Logo" /></a>
</div>
<div class="social">
    <a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" target="_blank"><span></span></a>
    <a href="https://www.facebook.com/UnifiedforUNIFAT" id="facebook" class="imglink" target="_blank"><span></span></a>
    <a href="http://unifiedforunifat.wordpress.com/" id="wordpress" class="imglink" target="_blank"><span></span></a>
</div>

<div>
    <ul id="menu">
        <li class="active"><a href="http://unifiedforunifat.com/redesign/menutestpage.html">UGANDAN PROGRAMS</a></li>
        <li class="active"><a href="#">US MOVEMENT</a></li>
        <li class="active"><a href="#">MEDIA</a></li>
        <li class="active"><a href="#">ABOUT US</a></li>
        <li class="active"><a href="#">DONATE</a></li>
    </ul>
</div>
</div>
</body>

然后这是我的主页与我的链接相关的链接：

a{
text-decoration:none;
}

a:link,a:visited{
display:block;
font-weight:bold;
text-align:center;
background-color:#ffffff;
padding:3px;
width:160px;
color:#000000;
float:left;
font-size:.9em;
transition-property:all 2s 0;
}

a:hover{
background-color:#e6e6e6;
color:#000000;
border-bottom: 2px solid black;
}

a:active{
background-color:#000000;
color:#ffffff;
border:none;
}

.imglink:hover{
background:none;
border-style:none;

}

任何帮助表示赞赏！

Answer 1

我使用了您提供的代码并尝试复制您的问题但未成功。我尝试过Firefox，Chrome和IE（版本7-10），无法重现您所描述的问题。有了这个说，你可以尝试一些事情：

在CSS调用中更具体：#wrapper .header .imglink:hover {etc...}
关闭图片的边框：.imglink img {border:0;}
确保您的网站使用DOCTYPE
尝试使用border：0;关闭边框而不是border-style：none;
查看源代码或使用FireBugs（或其他工具）在网页上查看您的代码，看看您的CSS或HTML是否被更改或覆盖。

如果这些选项都不起作用，如果可能的话，您可以分享公共网站地址。此外，它有助于了解您正在使用的浏览器和版本。希望有所帮助。

Answer 2

所以我终于找到了答案....这是我的代码的一部分：

a:hover{
background-color:#e6e6e6;
color:#000000;
border-bottom: 2px solid black;
}

我认为这是我以前做过的事情留下的代码，所以甚至没有必要......现在我想起来了，它从我最初将我的菜单包含在html文档本身而不是方法我没有通过SSI插入整个标题，这将允许我把i放在所有页面....

希望这可以在将来帮助某人！

：hover border-style：none在SSI中不粘贴图像

2 个答案: