Jquestions Jquestions - 2 years ago 60
CSS Question

How to allow a "Hover" on TOP in CSS in conjunction with a pseudo "::before" gradient background effect on a menu?

Run the snippet below and the menu design has a hover effect color change. However, my problem is that in conjunction with the gradient effect to hide the extra long text on this menu design, I cannot get the hover to appear above the gradient.

Reading up on using and testing with z-index appears it's not possible with pseudo elements like I'm using.

Any ideas?

<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="article.php">#Google</a>
</div>

<div class="topic_nav_arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>




a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}

a:active {
color: white;
text-decoration: none;
}


/* NAV > LIST > ROW */

li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}

li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}


/* LIST > ROW > TITLE */

.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}

.topic_nav_title a {
height: 20px;
}

.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}

.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}

.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}

<div class="topic_nav_container">

<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="#">Menu Item One That Is Long</a>
</div>
</li>

<li class="topic_nav_row">
<div class="topic_nav_title">
<a href="#">Menu Item Two That Is Too</a>
</div>
</li>

</div>




Answer Source

you can get hover the gradient disabling it...... like the example

a,
li {
  color: white;
  text-decoration: none;
  font-family: 'Abel';
}

a:active {
  color: white;
  text-decoration: none;
}


/* NAV > LIST > ROW */

li.topic_nav_row {
  width: 100%;
  height: 27px;
  line-height: 20pt;
  list-style-type: none;
  display: block;
  cursor: pointer;
  clear: both;
  position: relative;
}

li.topic_nav_row:hover {
  -webkit-box-shadow: inset 4px 0 0 0 white;
  box-shadow: inset 4px 0 0 0 white;
}


/* LIST > ROW > TITLE */

.topic_nav_title {
  font-family: Verdana;
  width: 80%;
  height: 27px;
  padding-left: 10%;
  position: relative;
  float: left;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  color: white;
}

.topic_nav_title a {
  height: 20px;
}

.topic_nav_title::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}

.topic_nav_title:hover {
  background-color: #514e4e;
  -webkit-box-shadow: inset 4px 0 0 0 white;
  box-shadow: inset 4px 0 0 0 white;
}

.topic_nav_title:hover:before{
  background:none;
}

.topic_nav_container {
  width: 180px;
  height: 100px;
  float: left;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  margin: 0;
  padding: 0;
  background-color: #3c3939;
}
<div class="topic_nav_container">

  <li class="topic_nav_row">
    <div class="topic_nav_title">
      <a href="#">Menu Item One That Is Long</a>
    </div>
  </li>

  <li class="topic_nav_row">
    <div class="topic_nav_title">
      <a href="#">Menu Item Two That Is Too</a>
    </div>
  </li>
  
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download