How to Make Entire Div Change Color on Hover Using CSS

div background color, to change onhover

The "a:hover" literally tells the browser to change the properties for the <a>-tag, when the mouse is hovered over it. What you perhaps meant was "the div:hover" instead, which would trigger when the div was chosen.

Just to make sure, if you want to change only one particular div, give it an id ("<div id='something'>") and use the CSS "#something:hover {...}" instead. If you want to edit a group of divs, make them into a class ("<div class='else'>") and use the CSS ".else {...}" in this case (note the period before the class' name!)

How to make entire div change color on hover using css?

You have a space in the hover selector. This matters because the space is the descendant selector in CSS

div.sidebar-link :hover{
    background-color: #E3E3E3;
}

This means that only hovered descendants of .sidebar-link are affected by the rules. Remove the space.

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

How to change background colour of entire div on hover?

#home {    font-size: 30px;    margin: 20px 100px 20px 100px;    display: inline-block;}#home a {background: #ffffff;    border: 4px solid #00a651;    padding: 10px 20px 10px 20px;         color: #00a651;          text-align: center;}#home a:hover {background: #00a651;               color: #ffffff;}

<div id="home">    <a href="index.html">HOME</a></div>

Change background colour of whole div on hover

The space after the class in the CSS, this causes any child elements to have the property applied instead. Remove the space, remove the issue

.index-card {  background: white;}
.index-card:hover {  background: red;}

<div class="index-card" data-card-index="5">    <div class="row">        <div class="col-md-12 text-center">            5        </div>    </div>    <div class="row">        <div class="col-md-12 text-center card-symbol">            ה        </div>    </div>    <div class="row">        <div class="col-md-12 text-center"><i>He</i></div>    </div>    <div class="row">        <div class="col-md-12 text-center">            <i>H</i>        </div>    </div></div>

css hover color change from right till 25% of the div

not to full length of width but only 25% of the div

You can use linear-gradient for this.

Also please suggest which tag I should put my hover properties- span tag or a tag

In principle, this does not require additional tags

How can I get a smooth transition animation during the colour change?

When hovering, you need to change the property background-position from one to other side (for example, from left to right).

Result

.link {  position: relative;  display: inline-block;  margin-left: 10px;  padding: 5px 10px;  color: #fff;  font-weight: 700;  text-decoration: none;  background: linear-gradient(to left, #138D89 25%, #000 25%) left / 135% 100% no-repeat;  transition: 0.3s;}
.link:hover {  background: linear-gradient(to left, #138D89 25%, #000 25%) right / 135% 100% no-repeat;}
.link::before {  content: "";  position: absolute;  top: 0;  right: 100%;  border-right: 15px solid #138D89;  border-top: 13px solid transparent;  border-bottom: 15px solid transparent;}
.link::after {  content: "";  position: absolute;  top: 50%;  left: 0;  transform: translate(-50%, -50%);  width: 10px;  height: 10px;  box-sizing: border-box;  background: #fff;  border-radius: 50%;}

<a class="link" href="">Lorem ipsum dolor sit amet.</a>

How to change color on every element in div when hovering?

You just need to simply add a hover effect that changes the anchor-element.
As anchor tag does not inherit attributes like if an href attribute is present.

.iconbox-blue:hover a{
  color: #fff;
}

.iconbox-blue {
  background: #fff;
  color: #000;
}

.iconbox-blue:hover {
  color: #fff;
  background: blue;
}
.iconbox-blue:hover a{
  color: #fff;
}

<div class="iconbox-blue">
  <a href=''>
    <h4 class="icon-box-title">Header</h4>
  </a>
  <p class="icon-box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>

---

Related Topics