affect parent div on child hover

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;
}*/

*"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."* are you looking for something like `.tabs-menu-item:not(.is-active):hover { color: red; }`? — Michael Coker, Apr 27 '17 at 20:53
Are you aware that a ruleset like this:`.tabs-menu-item.is-active a` targets an anchor: ` — zer00ne, Apr 27 '17 at 20:57

score 2 · Accepted Answer · answered Apr 27 '17 at 20:52

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>

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

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.

edited May 23 '17 at 10:31

Community

1
1

answered Apr 27 '17 at 20:36

Zach Broniszewski

252
1
2
13

I tried other solutions and they didn't work on this page – codyc4321 Apr 27 '17 at 21:17

affect parent div on child hover

2 Answers2