Why (className:hover + className) is not working on my page?

Question

I'm stuck in my html page to appear the other class element when hovering different element. I use (+) to display my pop-item when the serc-item is hover.

here is my code

.serv-item{
  margin: 10px 60px 0 0; 
  display: inline;
}
.serv-item a{
  color: #fff;
  display: inline-block;
  text-align: center;
  background-image: url("../img/serv1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 15%;
  height: 250px;
}
.serv-item a h3{
  font-family: 'Dosis', sans-serif !important;
  font-size: 20px;
  padding-top: 100px;
}

.serv-item:hover + .pop-info{/*Here i use + to display my h4 when serv-item is hover*/
  opacity: .7;
  display: inline-block;
}
.pop-info{
  display:none;
  position: relative;
  font-family: 'Dosis', sans-serif !important;
  font-size: 11px;
  margin-top: 25px;
  padding: 8px;
  border: 2px solid #fff;
  font-weight: bold;
  letter-spacing: .1em;
}

        <div class="serv-list">
          <div class="serv-item">
            <a href="#">
                <h3>ITEM 1</h3>
                <h4 class="pop-info">VIEW OFFER</h4><!--This is I want to display when serv-item is hover, because I set this to display none-->> 
            </a>
          </div>
          <div class="serv-item">
            <a href="#">
                <h3>ITEM 3</h3>
                <h4 class="pop-info">VIEW OFFER</h4>
            </a>
          </div>
        </div>

I already search this on google and it show like similar to my code but I don't know why mine is not working, thanks in advance for someone can teach me what is my error.

Just remove `+`. By using `+` you are trying to select the first `.pop-info` that are placed immediately **after** `.serv-item`. — Harun Yilmaz, Feb 25 '21 at 06:30
@HarunYilmaz now how to control multiple classname in single hover line? It is possible? — Infinite Button, Feb 25 '21 at 06:41

score 0 · Accepted Answer · answered Feb 25 '21 at 06:37

Hello there is No need To use + argument in css

You can use this css Here I use a >

.serv-item:hover a > .pop-info{
  opacity: .7;
  display: inline-block;
}

You can also use code like this

.serv-item:hover .pop-info{
  opacity: .7;
  display: inline-block;
}

and add this new line For Top alignment of block

.serv-item a{
  color: #fff;
  display: inline-block;
  text-align: center;
  background-image: url("../img/serv1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 15%;
  height: 250px;
  vertical-align:top; //ADD THIS NEW LINE
}

score 0 · Answer 2 · answered Feb 25 '21 at 06:44

0

"+" combinator in css only applies on adjacent sibling elements.

so correct code will be like this:

.serv-item:hover .pop-info{
  display:block;
}

answered Feb 25 '21 at 06:44

Levan Tchumburidze

69
4

Why (className:hover + className) is not working on my page?

2 Answers2