Question

所以我一直在我的网站上工作，我遇到了一个问题，其中：hover覆盖了两个不同的东西。当我将鼠标悬停在我的网站上时，我的顶部标签（下载，testtab，testtab）用于改变颜色，但是一旦我添加了一个我的图像按钮a：hover命令它就停止了工作，因为它们都具有相同的名称。我正在谈论的图像按钮位于底部，它不会出现在jsfiddle上，但你应该明白这一点。

http://jsfiddle.net/d6h1jpbj/

所以这是我添加的第一件事，它基本上告诉我的标签，当我在它们上面盘旋时改变颜色。

.boxhead a {    

    color: #afaeae;
    text-decoration: none;
    }

    a { 
        font-size: 17px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;

    }
a:hover {

    color: #7d7d7d;
}

这是我后来添加了我的图像按钮悬停效果的第二件事。出于某种原因，因为它们具有相同的名称，所以标签停止工作。我添加了一个我网站的jsfiddle来向你展示我的意思。

.image {
  position: relative;
  width: 238px;
  height: 238px;
}
.image a {
  display: block;
  z-index: 2;
  position: relative;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image a:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(91, 200, 255, 0.4);
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.image a:hover:after {
  opacity: 1;
}

我已经尝试将css放入两个不同的div中，但似乎没有用，所以我有点卡住了。任何帮助都会非常感激。

这是我的HTML：

<body>
    <div class="line"></div>
    <div id="wrapper">
        <div class="boxhead">
            <h2>
                <a href="myLink" style="margin-left:180px; float: left; width: 90px; margin-top: -40px; z- index: 1;"><span id="otherPage">Downloads</span></a>
            </h2>
            <h2>
                <a href="myLink" style="margin-left: 340px; float: left; width: 90px; margin-top: -40px; z-index: 1;"><span id="otherPage1">Testtab</span></a>
            </h2>
            <h2>
                <a href="myLink" style="margin-left: 480px; float: left; width: 90px; margin-top: -40px; z-   index: 1;"><span id="otherPage2">Testtab</div> </span></a>
            </h2>
            <img src="img/logo.png" alt="Mountain View" style=" float: left; margin-left: 30px; margin-top:     -50px; z-index: 1;">
        </div>
    </div>
    <div id="wrapper">
        <div class="line2"></div>
        <div class="line25"></div>
        <div class="line3"></div>
        <div class="line4"></div>
    </div>
    <div id="wrappers">
        <div class="image">
            <a href="#"> <img src="img/teslalogo.jpg" alt="Clickable" /> </a>
        </div>
    </div>
</body>

Answer 1

您可以通过类名分隔锚点来管理锚标记的不同样式。

例如假设您的HTML看起来像

<a class='google' href='www.google.com'>Google</a>
<a class='facebook' href='www.facebook.com'>Facebook</a>

然后你需要写这样的css

a.google {
    color: red;
}

a.google:hover {
    color: green;
}


a.facebook {
    color: blue;
}

a.facebook:hover {
    color: red;
}

Answer 2

最好的解决方案是关注，永远不要添加A或A.Hover只需使用以下代码即可使用

.boxhead 
{    
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}

.boxhead:hover 
{
color: #7d7d7d;
}

重命名a：之后，a：悬停，a

2 个答案: