Question

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

我正在构建导航。

<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的边框和＆lt;的颜色都是a＆gt;标签文本同时更改

我试过这个

   #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中做这件事的建议都是史诗般的？

Answer 1

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

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

或尝试使用!important

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

作为旁注：您还可以避免为标记中的每个div使用重复的类名，而是使用#navigation > div来引用这些元素

Answer 2

你的代码很好。但我认为现有的一些风格正在压倒你现在的风格。因此我建议使用如下所示的相对样式技术来实现所需的结果：

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

  }

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

查看DEMO

CSS on：悬停更改子项属性

2 个答案: