CODEWITHSUNDEEP
javascriptcsshover
Gaurang Tandon
Gaurang Tandon

Reputation: 6781

Hover not being detected on element

Picture:

problem depicting picture

What I want:

I want the hover to be registered even when the mouse cursor moves over that blue diamond shaped area in the picture above.

Problem:

Whenever I hover over that blue diamond shaped area, which visually appears to the user as a region in .path_part, the hover rule .folder_path .path_part:hover is not being applied on .part_part.

What I tried:

Set the z-index of .path_part to 10000 and that of .right_arrow to -1. Still no luck.

JSFiddle link

Upvotes: 0

Views: 348

Answers (2)

Krishna Rana
Krishna Rana

Reputation: 379

  $(".path_part").hover(function(){
       $(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
  }, function(){
       $(this).next().css({"background": "unset"});
  });

You can use jquery.This code will work for you.

Upvotes: 0

Tarun Dugar
Tarun Dugar

Reputation: 8971

Working fiddle.

First of all, z-index can have a maximum value of 9999.

One thing to note is that only the left portion .right-arrow is overlapping with .path-part, and since the hover handler is on .path-part only that left portion will trigger the hover handler.

Also, for z-index to work both .path-part and .right-arrow need to be positioned, that is, position property set to either relative, absolute or fixed.

Change your CSS to:

.folder_path .right_arrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    height: 35px;
    width: 35px;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right     bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
    margin-left: -25px;    
}

.folder_path .path_part {
    position: relative;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    min-width: 40px;
    font-size: 20px;
    padding: 0 10px;
    z-index: 2;
}

Upvotes: 1

Related Questions