CODEWITHSUNDEEP
htmlcss
Rassul
Rassul

Reputation: 7

CSS hover is not working, when I'm pointing mouse - nothing happens

For some reason CSS hover is not working. I've tried to use negative z-index to hide behind divs that might be "covering" my element for hover(found it on some forum) but still the same.

The result I'm trying to achieve - when I hover mouse over animated elements on the right and left sides, it supposed to show 2 buttons which I should be able to use as a part of navbar.

.header-container {}

.borderright {
  display: none;
  width: 250px;
  height: 70px;
  position: fixed;
  right: 0%;
  top: 50%;
  background-color: rgb(0, 0, 0);
  border: 1px solid white;
  color: white;
  float: right;
}

.testright {
  position: fixed;
  top: 50%;
  right: 2%;
}

.testright:hover+.borderright {
  display: block;
}
<div class="testright">
  This is the parent div which should trigger display:block with animated child
  <div class="dot-carousel">
    dot-carousel described in separate css file(animation)
  </div>
</div>

<div class="header-container">
  <div class="borderright">
    <div class="hero-image-right">
      <img src="assets/images/portfolio-dots.png" alt="">
    </div>
    <a href="#">
      <span class="spanright">Hidden clickable button that should appear on hover</span>
    </a>
  </div>
</div>

Upvotes: 0

Views: 447

Answers (2)

IRLotsEvil
IRLotsEvil

Reputation: 36

is this what you were trying to achieve?

.testright:hover + .header-container .borderright{
    display: block; 
}

The selector was targeting .borderright as a sibling of .testright:hover when .borderright is the child of the sibling element .header-container

Upvotes: 1

David Frederick
David Frederick

Reputation: 202

Your selector wasn't correct.

HTML

        <div class="testright">
            This is the parent div which should trigger display:block with animated child
            <div class="dot-carousel">dot-carousel described in separate css file(animation)</div>
        </div>

        <div class="header-container">
            <div class="borderright">
                <div class="hero-image-right">
                    <img src="assets/images/portfolio-dots.png" alt="" />
                </div>
                <a href="#"><span class="spanright">Hidden clickable button that should appear on hover</span></a>
            </div>
        </div>

CSS

.header-container {}

.borderright {
    display: none;
    width: 250px;
    height: 70px;
    position: fixed;
    right: 0%;
    top: 50%;
    background-color: rgb(0, 0, 0);
    border: 1px solid white;
    color: white;
    float: right;
}

.testright {
    position: fixed;
    top: 50%;
    right: 2%;
}
.testright:hover + .header-container .borderright {
    display: block;
}

Upvotes: 0

Related Questions