Question

我使用了反应简单标签https://github.com/pedronauck/react-simpletabs，它会生成

<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>

我的目标是将鼠标悬停在非活动标签上，并使边框（顶部，左侧，右侧）变为深灰色，以便用户知道它是一个标签。

我尝试使用像How to style the parent element when hovering a child element?这样的指针事件，它并没有破坏任何东西，但它没有用。

我现在有css

.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

检查“tabs-menu-item”类指针事件的代码设置为无。我在这里覆盖它“.tabs-menu-item：not（.is-active）”。我不知道是不是故意放了。见下面的代码

.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

之前已经问过这个问题，请看这里：

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

正如所提到的，级联样式表实现了直接的逻辑流程。然而，通常还有其他可能性来完成同样的事情，比如当你按照链接给它一个兄弟姐妹和一个像这个例子的父母。

影响儿童悬停时的父div

2 个答案: