CODEWITHSUNDEEP
htmlcss
babadahal
babadahal

Reputation: 41

Not being able to set background color on hover

I'm not able to set background color on :hover for the ID "tags" I feel like it's because it's being replaced by the id "tripBox" because when I change the font-size on hover it works, just can't set it's background color. 

<center><div style="position:absolute; z-index:999; display:none;" class="map_id" id="map"></div></center>
        <div class="col-sm-6">
          <div style="background:#D3D3D3" id="tripBox" class="box">
                <div class="row">
                  <div class="col-sm-6">
                      <img onClick="test()" style="opacity:2.0" id="trip_image" src="some_url" class="location-map img-responsive">
                  </div>
                  <div id="info_box" class="col-sm-6">
                    <p>Test</p>
                    <p>07/08/20 </p>
                    <p>Device ID # <a class="trip-id" href="">456789</a></p>
                    <div id="tags">
                       <span><i style="margin-right:2%;" class="fas fa-tag"></i></span>
                       <div style="display:inline" contenteditable="true">test tag, test tag2</div>
                       <span id ="icon_span_id" class="glyphicon">&#x270f;</span>
                                          <br><br>
                    </div>

                    <p style="color:red;" class="display_text">My Display</p>

                  </div>

                </div>

            </div>
        </div>

My .css looks like this:

#tags:hover{
   background : '#D3D3D3';
}

Upvotes: 0

Views: 108

Answers (2)

vishal sehgal
vishal sehgal

Reputation: 41

Yes changing to color other than #D3D3D3 would work and yes quotes are not required in Css, also you can have look on https://www.w3schools.com/css/css_pseudo_classes.asp for more info on pseudo classes.

Upvotes: 0

hans-k&#246;nig
hans-k&#246;nig

Reputation: 553

The CSS is working. The problem is that the background is #D3D3D3 and you are trying to change it to the same colour(#D3D3D3).

#tags:hover{
   background-color: #ffffff;
}

Upvotes: 1

Related Questions