0

所以我想知道这是否可能。

我正在建立一个导航。

<nav id="navigation">
  <div class="nav_buttons"><a href="/">home</a></div>
  <div class="nav_buttons"><a href="/system/">system</a></div>
  <div class="nav_buttons"><a href="/studies/">studies</a></div>
  <div class="nav_buttons"><a href="/approach/">approach</a></div>
  <div class="nav_buttons"><a href="/about/">about</a></div>
  <div class="nav_buttons"><a href="/contact/">contact</a></div>
</nav>

但我想要的是，当我将鼠标悬停在其中一个上时，div 的边框和 < a > 标签文本的颜色同时改变

我试过这个

   #navigation {
     text-align: center;
     height: 150px;
     padding-top: 100px;

    }
  .nav_buttons {    
    display: inline; 
    height: 40px;
    width: 100px;
    border-bottom: 1px solid black;
    margin-left: 20px;
    }
  #navigation a{
    margin-right: 50px;
    font-size: 20px;
    text-decoration: none;
    color: black;
    }


  div.nav_buttons:hover {
    border-bottom: 1px solid #ff3300;

  }
  div.nav_buttons:hover a{
    color:#ff3300;
  }

但这只会改变预兆。我愿意使用 javascript，但我看到您可以更改子元素购买悬停在父元素上。

div#parent_element:hover div.chil_element {color: red;}

任何简单地在 CSS 中做的建议都是史诗般的？

4

2 回答 2

2

这取决于（以前的）规则特异性问题，因为您使用选择器分配了样式#navigation a。所以试试这个

#navigation > div:hover a {
    color:#ff3300;
}

或简单地尝试!important 

div.nav_buttons:hover a {
    color:#ff3300 !important;
}

附带说明：您还可以避免对标记中的每个 div 使用重复的类名，而是使用#navigation > div来引用这些元素

于 2013-01-23T09:19:07.387 回答
1

你的代码很好。但我认为一些现有的样式正在覆盖您当前的样式。所以我建议使用如下的相对样式技术来达到预期的效果：

  #navigation div.nav_buttons:hover {
    border-bottom: 1px solid #ff3300;

  }

  #navigation div.nav_buttons:hover a{
    color:#ff3300;
  }

查看演示

于 2013-01-23T09:24:14.270 回答