hover is not working on child element - html

Question

I have div inside a div as below
<div id="locations">
<div id="h-dragbar"></div>
</div>
and css as below
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: -1;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
but hover on div with id h-dragbar is not working. You can test the code here demo.
What am I doing wrong? Thanks in advance.

Answer 1

In the new example jsFiddle which you've provided, you're setting a z-index of -1 to the parent div i.e. #locations which is why you're unable to perform the hover function on its child div i.e. #h-dragbar. You will need to remove the negative z-index on #locations and then it'll work fine.
Update:
I've checked your latest fiddle and instead of using a negative z-index for #locations in order to give priority to #v-dragbar, you can achieve the same by using a high z-index for #v-dragbar, for e.g. z-index: 9999, and a relatively smaller z-index for #locations, for e.g. z-index: 9998. It'll work perfectly this way. Here's a demo:
body {
width: 100%;
height: 500px;
}
#wrapper {
width: 100%;
height: 100%;
}
#explorer {
width: 13%;
min-height: 100%;
height: 100%;
position: relative;
float: left;
}
#v-dragbar {
background-color: black;
height: 100%;
float: right;
width: 2px;
cursor: col-resize;
z-index: 9999;
position: relative;
}
#h-dragbar {
background-color: black;
width: 100%;
height: 2px;
cursor: row-resize;
position: absolute;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover {
background-color: blue;
}
#v-dragbar:hover {
background-color: blue;
}
#locations {
height: 50%;
width: 100%;
position: relative;
z-index: 9998;
/*imp*/
}
<div id="wrapper">
<div id="explorer">
<div id="v-dragbar"></div>
<span style="clear: both;"></span>
<div id="locations">
<div id="h-dragbar"></div>
</div>
<div id="datapoints">
</div>
</div>
<div id="explorer">
</div>
</div>

Answer 2

It's not working because of the negative z-index - you're basically putting the whole thing behind the body element, rendering it non-hoverable, non-clickable, etc. We can't help further without more context, but you'll need to change your strategy a bit for this to work.

Answer 3

Your example works fine…
However, try:
#h-dragbar:hover{
background-color:blue !important;
}
If now it works, for you, it means that some other CSS instance has priority.

Answer 4

If you cannot make a positive z-index, make a z-index: 0; and check. It works:
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: 0;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
<div id="locations">
<div id="h-dragbar"></div>
</div>