不同的悬停效果 [html/css]

Question

我有一个在所有列出的链接/项目上都有悬停效果的菜单。我想放一个主页图标（房子），它的悬停效果是在两个不同颜色的相同图像之间切换，好的，我明白了，但主要的悬停效果仍然适用于它作为背景。

例如，当我将鼠标移到任何链接上时，悬停效果是文本周围的橙色背景，我只想从主页图标中删除该效果（鼠标上已经在白色房子和橙色房子之间切换结束）。

我已经尝试了很多东西，但仍然没有成功......

提前谢谢你！

Picture of what I'm talking about

HTML 代码：

<div class="Menu">

<div class="ner">
<ul>

        <li class="home">
             <a  href="#" ><img onmouseout="this.src='home1.png'" onmouseover="this.src='home2.png'" src="home1.png" width=25px; height=25px;></a></li>


            <li><a href="#">Item1</a></li>
            <li class="drop">
                <a href="#">Item2</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Blog 1</li>
                            <li>Blog 2</li>
                            <li>Blog 3</li>
                            <li>Blog Blog 4</li>
                        </ul>
                    </div>
                </div>

            </li>
            <li><a href="#">Item3</a></li>


<li class="drop">
                <a href="#">Item4</a>

                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li>Blog 1</li>
                            <li>Blog 2</li>
                            <li>Blog Blog 3</li>
                            <li>Blog Blog 4</li>
                        </ul>
                    </div>
                </div>

            </li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>


</ul>
</div>
</div>

CSS 代码：

.Menu {
    background: #44474B;
    display: block;
    position: fixed;
    width:900px;
    right: 0;
    top: 0;
    height: 55px;
    min-width: 100%;
    z-index: 9999;
}

.Menu ul{ float:left;}

.Menu li{position:relative; z-index:10; float:left; list-style:none; margin:0 15px; }

.Menu a{ padding:11px 18px; color:#373737; list-style:none; color:#FFF; text-decoration:none; 
        -webkit-transition: all .3s linear 0s;
    -moz-transition: all .3s linear 0s;
    -ms-transition: all .3s linear 0s;
    -o-transition: all .3s linear 0s;
    transition: all .3s linear 0s;}

.Menu ul li a:hover{ border-radius:6px;
background: #ffa84c; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-8 */

}

.Menu .home a:hover {
background-color: green; !important
text-decoration:none; !important
}

.ner{width:900px; margin:0 auto; padding-top:0; padding-left:0;}

绿色背景色仅用于测试目的。

Answer 1

您可以向主页图标的锚标记添加一个类，并对该类实现不同的 css 更改，如下所示：

HTML：

<li>
    <a class="home" href="#" ><img onmouseout="this.src='home1.png'" onmouseover="this.src='home2.png'" src="home1.png" width="25" height="25">
    </a>
</li>

CSS：

a:hover.home {
  background-color: green; !important
  text-decoration:none; !important
}

这是一个带有上述代码的 jsfiddle 示例：http://jsfiddle.net/AndrewL32/g2vqL0ms

而width=25px; height=25px; 应该是width="25" height="25"