Question 254983 in Html Question posted in
Some basic documentation can be found here.

Html – Effect only works on last element

Am trying to make a hover effect on the h4s but the hover only affects the last h4 i don’t know why

Here’s the html

 <div class="feat-list">
       <h4>Simple Bookmarking</h4>
       <h4>Speedy Searching</h4>
       <h4>Easy Sharing</h4>
     </div>

Here’s the css

.features .feat-list h4{
  position: relative;
  width: 100%;
  text-align: center;
  color: hsl(229, 31%, 21%);
  border-top: .8px solid hsla(229, 31%, 21%, .5);
  padding-block: 20px;
}
.features .feat-list h4:hover::before{
  position: absolute;
  content: '';
  left: 50%;
  bottom: 0;
  width: 30%;
  height: 3px;
  background: var(--soft-red);
  transform: translateX(-50%);
}
.features .feat-list h4:nth-of-type(3){
  border-bottom: .8px solid hsla(229, 31%, 21%, .5);
}
Tags:

2

Answers


  1. 0

    It works with all h4 elements.

    You gave an additional Border to the 3. Element (its the last here) but that does not affect the hover action.

    The first css selector in your example is not in your HTML (.features).
    To make the CSs Work you need a parent width this class or you can remove the named Selector.

    Login or Signup to reply.
  2. 0

    This works to target all h4 elements, then just add additonal styling/effects.

    .feat-list h4:hover {
    background-color: #ff0000;
    /* Add effects */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search