Question

我正在尝试这样做，以便悬停效果将适用于列出的项目标记和嵌套的锚标记。理想情况下我想要它以便所有CSS都在一个标记而不是分割分成两部分。我希望在触发列出的元素标记时，锚标记的悬停效果会生成动画。我假设解决方案是将样式合并为一个，但我不知道该怎么做。

HTML：

<ul class="nav">
<li>
    <a href="#" class="blue">CONTACT</a>
</li>
<li>
    <a href="#" class="blue">ABOUT</a>
</li>
<li>
    <a href="#" class="blue">PORTFOLIO</a>
</li>
</ul>

CSS：

body{
    background: #000;
}
ul{
    list-style-type:none;
    display: inline-block;
}

.nav{
    float:right;
    list-style-type:none;
    overflow: hidden;   
}

.nav li{
    float:right;
    overflow: hidden;
    color: #00bff3;
    border: 1px solid #00bff3;
    padding: 8px;
    margin-left: 10px;
    text-align: center; 
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

.nav li:hover{
    background:#00bff3;
    color:#000000;
}

.blue{
    color: #00bff3;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

.blue:hover{
    color:#000000;
}

http://jsfiddle.net/2gbu5yrz/

Answer 1

也许这就是您要找的内容：将.blue:hover替换为.nav li:hover .blue。

http://jsfiddle.net/p0ahhp5c/

Answer 2

将相关样式移动到链接本身很容易（实际上它们应该在哪里）：

http://codepen.io/pageaffairs/pen/PwNeEO

.blue{
  color: #00bff3;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  display: block;
  text-align: center;   
  padding: 8px;
}

.blue:hover{
  color:#000000;
  background:#00bff3;
}

Answer 3

解决方案是使您的a使用块显示样式：

.blue{
    display: block;
    color: #00bff3;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

Answer 4

试试这个

＆＃13;

.nav:hover .blue:hover {
  /*your code here*/
  }

＆＃13;

使用<li>和<a>?</a> </li>同步悬停状态

4 个答案: