CODEWITHSUNDEEP
htmlcsscss-animations
Yomgi
Yomgi

Reputation: 23

CSS button hover effect on a a button not working

I'm trying to animate divs on a button to create an "ellipsis" effect next to text whenever I hover over the button. Somehow I can't even manage to get the divs to change color, let alone have them scale from 0 to 1 afterwards.

.btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:hover + .dot {
  background-color: yellow;
}

.nxt {
  margin-right: 10px;
  text-align: center;
}

.dotdotdot {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 2px;
}

.dot {
  background-color: red;
  height: 7px;
  width: 7px;
  margin-right: 5px;
  transition: background-color 1000ms;
}
   <div class = "central_container">
        <div class ="lower_container">
            <div class="btn">
                <div class="nxt">Next</div>
            </div>
            <div class ="dotdotdot">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>

Any help would be highly appreciated! Thanks.

Upvotes: 1

Views: 105

Answers (4)

smunteanu
smunteanu

Reputation: 542

EDIT: now works as you wanted

You had to use .btn:hover, .dot:hover { ... } instead of .btn:hover + .dot { ... }

.btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:hover, .dotdotdot:hover > .dot {
  background-color: yellow;
}

.nxt {
  margin-right: 10px;
  text-align: center;
}

.dotdotdot {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 2px;
}

.dot {
  background-color: red;
  height: 7px;
  width: 7px;
  margin-right: 5px;
  transition: background-color 1000ms;
}
<div class = "central_container">
    <div class ="lower_container">
        <div class="btn">
            <div class="nxt">Next</div>
        </div>
        <div class ="dotdotdot">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</div>

Upvotes: -1

Muhammad Rizwan Munawar
Muhammad Rizwan Munawar

Reputation: 692

       .btn {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      text-align: center;
      font-size: 1.3em;
      cursor: pointer;
    }
    
    .btn:hover,.dot{
      background-color: yellow;
    }
    
    .nxt {
      margin-right: 10px;
      text-align: center;
    }
    
    .dotdotdot {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-end;
      padding-bottom: 2px;
    }
    
    .dot {
      background-color: red;
      height: 7px;
      width: 7px;
      margin-right: 5px;
      transition: background-color 1000ms;
    }
    <div class = "central_container">
            <div class ="lower_container">
                <div class="btn">
                    <div class="nxt">Next</div>
                </div>
                <div class ="dotdotdot">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>

Upvotes: 0

Kev Rob
Kev Rob

Reputation: 322

The problem is that the button and the .dot are not in the same div. Try this code below:

.btn {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
}

.btn:hover ~ .dotdotdot > .dot {
  background-color: yellow;
}

.nxt {
  margin-right: 10px;
  text-align: center;
}

.dotdotdot {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  padding-bottom: 2px;
}

.dot {
  background-color: red;
  height: 7px;
  width: 7px;
  margin-right: 5px;
  transition: background-color 1000ms;
}
<div class = "central_container">
        <div class ="lower_container">
            <div class="btn">
                <div class="nxt">Next</div>
            </div>
            <div class ="dotdotdot">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>
    </div>

Upvotes: 0

Christian
Christian

Reputation: 1260

The CSS + selector is the "Adjacent sibling combinator" (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) but div.dot is not a sibling of div.btn because it is contained in div.dotdotdot. So div.dotdotdot is the adjacent sibling.

You might change the line

.btn:hover + .dot {

to

.btn:hover + .dotdotdot > .dot {

Upvotes: 2

Related Questions