CODEWITHSUNDEEP
htmlcss
dimitri-sky
dimitri-sky

Reputation: 23

HTML CSS Bootstrap: When hovered on, icon in button does not change color?

When I hover over the button, the color of the text 'Visit' changes appropriately but the Icon of Amazon does not.

One has to directly hover over the icon to change its color, but hovering anywhere over the button and then the change of color of the icon is desired.

I assume it's some complication with the class .middlered, which only serves to change the color to red because the site's native color is green.

Thank you. :)

* {
  text-align: center;
  color: rgb(50, 185, 176);
  font-size: 1.03em;
}

.middlered * {
  color: rgba(211, 0, 0, 0.938);
}

/* FOLLOWING LINE IS THE PROBLEM? */

.btn :hover{
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="row gallery">
    <div class="column">
        <div class="card border-0">
            <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a>
            <div class="card-body">
                <h5 class="card-title">SOME INFO</h5>
                <p class="card-text">SOME MORE INFO.</p>
                
                <!-- FOLLOWING LINE IS THE PROBLEM?  -->
                
                <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a>
                
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1684

Answers (2)

yinsweet
yinsweet

Reputation: 2851

You may add .btn:hover i after .btn:hover, for the CSS code to change the icon color to white.

* {
  text-align: center;
  color: rgb(50, 185, 176);
  font-size: 1.03em;
}

.middlered * {
  color: rgba(211, 0, 0, 0.938);
}


/* FOLLOWING LINE IS THE PROBLEM? */

.btn:hover, /* remove the space between .btn and :hover */
.btn:hover i { /* Add this line to change the color of the icon as well */
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="row gallery">
  <div class="column">
    <div class="card border-0">
      <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla"></a>
      <div class="card-body">
        <h5 class="card-title">SOME INFO</h5>
        <p class="card-text">SOME MORE INFO.</p>

        <!-- FOLLOWING LINE IS THE PROBLEM?  -->

        <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="fa fa-amazon" aria-hidden="true"></i></a>

      </div>
    </div>
  </div>
</div>

Upvotes: 1

Benjay
Benjay

Reputation: 11

You could add this css class .icon { color: inherit; } and add the class icon to the element like <i class="icon fa fa-amazon" aria-hidden="true"></i>.

* {
  text-align: center;
  color: rgb(50, 185, 176);
  font-size: 1.03em;
}

.middlered * {
  color: rgba(211, 0, 0, 0.938);
}

/* FOLLOWING LINE IS THE PROBLEM? */

.btn:hover {
  color: white;
}

.icon {
  color: inherit;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="row gallery">
    <div class="column">
        <div class="card border-0">
            <a href="SOMELINK"><img src="SOMEIMG.jpg" class="card-img-top" alt="Bla Bla Bla" ></a>
            <div class="card-body">
                <h5 class="card-title">SOME INFO</h5>
                <p class="card-text">SOME MORE INFO.</p>
                
                <!-- FOLLOWING LINE IS THE PROBLEM?  -->
                
                <a id="bottom" target="_blank" href="SOMELINK" class="btn btn-outline-danger btn-sm middlered pl-4 pr-4">Visit <i class="icon fa fa-amazon" aria-hidden="true"></i></a>
                
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions