Cant change background image in css on hover

Question

I have 6 col-lg-3 in my container. Each div including another div, h4 and p. Included divs have background-image, and some properties in CSS. And I want to change included div background-image on hovering col-lg-3 div But it just ignore :hover and nothing happening.

Ive tried not only change background-images, but change color, add borders, etc. But no response. Heres one of div.col-lg-3...

.reasons .col-lg-3 div {
  width: 99px;
  height: 99px;
  margin: 10px auto 5px auto;
  background-size: 99px 99px;
  background-repeat: no-repeat;
  transition: 0.5s ease;
}

.community:hover div {
  background-image: url('img/communityReverse.png');
}

<div class="col-lg-3 community">
  <div style="background-image: url('img/community.png')"></div>
  <h4>Lorem ipsum dolor</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

.community:hover div{ ... } seems not working, but for example .community:hover h4{ font-size: 30px; } ok, no problem. I cant see what is wrong

score 0 · Answer 1 · answered May 25 '19 at 06:07

0

you check this code you are working with wrong code

.community div:hover 
 {
    background-image: url('img/communityReverse.png');
 }

answered May 25 '19 at 06:07

ATIQ UR REHMAN

431
3
12

I need change bg exactly on hovering div.community block – Roman May 25 '19 at 06:13

score 0 · Answer 2 · answered May 25 '19 at 06:17

you need to use !important in your code otherwise you have done well

.reasons .col-lg-3 div {
  width: 99px;
  height: 99px;
  margin: 10px auto 5px auto;
  background-size: 99px 99px;
  background-repeat: no-repeat;
  transition: 0.5s ease;
}

.community:hover div {
  background-image: url('img/communityReverse.png') !important;
}

<div class="col-lg-3 community">
  <div style="background-image: url('img/community.png')"></div>
  <h4>Lorem ipsum dolor</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

mattdaspy · Accepted Answer · 2019-05-25T06:37:10.027

You had an issue on your CSS, because you were trying to nest the div inside a class that wasn't declared before (.reasons). Aside from that, you should declare the .community class inside the nested div, so the image will be separated on the code (better view and easier to deal with), then, just make the :hover event apply to the class, so whenever the mouse enters the area, it'll trigger the event and change the background.

Here goes a Snippet for better view of the code and how it works :

.community div {
  width: 100%;
  height: 99px;
  margin: 10px auto 5px auto;
  background-image: url("http://www.f-covers.com/cover/cute-baby-kitten-facebook-cover-timeline-banner-for-fb.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.5s ease;
}

.community:hover div {
  background-image: url("https://www.freewebheaders.com/wordpress/wp-content/gallery/cats/lovely-american-shorthair-kitten-website-header.jpg");
}

<div class="col-lg-3 community">
  <div></div>
  <h4>Lorem ipsum dolor</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

By the way, you don't have to specify a nested class when just wanting to work with general styles, as .community is nested as sibling with .col-lg-3, you can use either to change inner styles as I did in the Snippet above.

score 0 · Answer 4 · answered May 25 '19 at 06:49

0

Have you tried !important ?

.community:hover div {
  background-image: url('img/communityReverse.png')!important;
}

answered May 25 '19 at 06:49

user2955356

1
1
1
3

Cant change background image in css on hover

4 Answers4