影响父div在儿童悬停时

Question

I have a usage of react simple tabs https://github.com/pedronauck/react-simpletabs , which generates

<div class='tabs'>
    <nav class='tabs-navigation'>
      <ul class='tabs-menu'>
        <li class='tabs-menu-item is-active'>Tab #1</li>
        <li class='tabs-menu-item'>Tab #2</li>
      </ul>
    </nav>
    <article class='tab-panel'>
      The content of active panel here
    </article>
  <div>

My goal is to hover over a non-active tab and make the border (top, left, right) a darker grey so users know it's a tab.

I tried using pointer events like How to style the parent element when hovering a child element? and it didn't break anything, but it didn't work.

I have css now

.tabs-menu {
  display: table;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.5em;
}

.tabs-menu-item {
  float: left;
  margin-right: 20px;
  padding: 10px 10px 0px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;

  /*background-color: white;*/
}

.tabs-menu-item:hover {
    border-top: 2px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
}

.tabs-menu-item a {
  cursor: pointer;
  display: block;
  color: #A9A9A9;
  pointer-events: auto;
}

.tabs-menu-item:not(.is-active) a {
    color: #f96302;
}

.tabs-menu-item:not(.is-active) a:hover {
    color: #ff8000
}

.tabs-menu-item.is-active a {
    color: #3498DB;
}

.tabs-menu-item.is-active {
    border-top: 3px solid orange;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.tabs-menu-item:not(.is-active) {
    border-top: 2px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}

.tabs-menu-item.is-active a {
color   : black;
}

.tabs-menu-item.is-active a:hover {
    cursor: default;
    text-decoration: none;
}

article .tab-panel {
    margin-top: 0px;
}
/*.tab-panel {
  padding: 10px 50px;
}*/

Answer 1

Checking you code for "tabs-menu-item" class pointer-event is set to none. I overrode it here ".tabs-menu-item:not(.is-active)". I don't know whether it was intentionally put. See code below

 .tabs-menu { display: table; list-style: none; padding: 0; margin: 0; font-size: 1.5em; } .tabs-menu-item { float: left; margin-right: 20px; padding: 10px 10px 0px; font-size: 15px; font-weight: 600; text-align: center; pointer-events: none; /*background-color: white;*/ } .tabs-menu-item:hover { border-top: 2px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #808080; } .tabs-menu-item a { cursor: pointer; display: block; color: #A9A9A9; pointer-events: auto; } .tabs-menu-item:not(.is-active) a { color: #f96302; } .tabs-menu-item:not(.is-active) a:hover { color: #ff8000 } .tabs-menu-item.is-active a { color: #3498DB; } .tabs-menu-item.is-active { border-top: 3px solid orange; border-left: 1px solid grey; border-right: 1px solid grey; } .tabs-menu-item:not(.is-active):hover { border-top: 2px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; } .tabs-menu-item:not(.is-active) { pointer-events: visible; cursor: default; } .tabs-menu-item.is-active a { color : black; } .tabs-menu-item.is-active a:hover { cursor: default; text-decoration: none; } article .tab-panel { margin-top: 0px; } /*.tab-panel { padding: 10px 50px; }*/ 

 <div class='tabs'> <nav class='tabs-navigation'> <ul class='tabs-menu'> <li class='tabs-menu-item is-active'>Tab #1</li> <li class='tabs-menu-item'>Tab #2</li> </ul> </nav> <article class='tab-panel'> The content of active panel here </article> <div> 

Answer 2

This question has been asked before, please see here:

How to style the parent element when hovering a child element?

Just as mentioned, cascading stylesheets implements a direct logical flow. There are usually other possibilities to get the same thing done however, such as giving it a sibling and a parent like the example when you follow the link.