CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul
Paul

Reputation: 3368

Getting a background image to hover

I am trying to get a background image to change when hovered over. This part I have working, but for some reason the new image appears in a different location. I also have no idea to get the normal image to go away when hovered over. I created two different images to get the effect I am going after. I am unsure if this is the correct method, but it was all I could think of. Also, for some reason I cannot get the cursor:pointer; to work with the `background-image.

How can I get the hover image to be in the same spot as the original image and either cover it completely, so the initial one does not show, or remove the first one until not hovered over.

#blue {
  background: blue;
  height: 600px;
  width: 100%;
}
#home-arrow {
  /*height: 100px;*/
  width: 100%;
  position: absolute;
  top: 65%;
  z-index: 99;
  /*cursor: pointer;*/
}
#circle-arrow {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
<div id="blue">
  <div id="home-arrow">
    <div id="circle-arrow"></div>
  </div>
</div>

Upvotes: 1

Views: 534

Answers (5)

Shaminder Singh
Shaminder Singh

Reputation: 1293

Add #circle-arrow after #home-arrow:hover selector in your css, and just add hover image for the background, it will work for you.

#home-arrow:hover #circle-arrow{
    background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
}

Edit 1 (hover only on circle)

If you want to get hover only on circle then just remove #home-arrow:hover and replace it with #circle-arrow:hover as 

#circle-arrow:hover{
        background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
    }

and if you crop your images to just about width of the circle then it will be good for circle hover. Right Now both images have lots of empty space on left and right.

EDIT 2 (some issue with z-index) Add background-position:center to your #home-arrow:hover and remove width, height etc as:

#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
   background-position: center; 
  margin: auto auto;
}

See Updated Fiddle Here

Upvotes: 1

Julian Guterman
Julian Guterman

Reputation: 187

Aside from all the hovering issues with the background image...

cursor: default;

Upvotes: 0

Scott
Scott

Reputation: 21892

Replace #home-arrow:hover in the css with #circle-arrow:hover.

Then you can do some pruning of the css...

#blue {
  background: blue;
  height: 300px;
  width: 100%;
}
#home-arrow {
  /*height: 100px;*/
  width: 100%;
  position: absolute;
  top: 5%;
  z-index: 99;
  /*cursor: pointer;*/
}
#circle-arrow {
  background: url("http://optimumwebdesigns.com/images/circle-arrow.png") no-repeat center center;
  height: 155px;
  width: 300px;
  margin: auto auto;
  position: relative;
  top: 40%;
}
#circle-arrow:hover {
  background: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png") no-repeat center center;
}

Note I changed the height of #blue selector and the top property of #home-arrow so it can be seen in a Working Fiddle...

The #circle-arrow and #circle-arrow:hover are the two selectors you should be able to just copy/paste into your css.

Upvotes: 0

PHPExpert
PHPExpert

Reputation: 943

Change your class "#home-arrow:hover" by

#home-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 195px;
  width: 300px;
  margin: auto auto;
  position: relative;
  top: 40%;
  background-position: 0 78px;

}

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try substituting #circle-arrow:hover selector for #home-arrow:hover

#blue {
  background: blue;
  height: 600px;
  width: 100%;
}
#home-arrow {
  /*height: 100px;*/
  width: 100%;
  position: absolute;
  top: 65%;
  z-index: 99;
  /*cursor: pointer;*/
}
#circle-arrow {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
#circle-arrow:hover {
  background-image: url("http://optimumwebdesigns.com/images/circle-arrow-hover.png");
  background-repeat: no-repeat;
  height: 155px;
  width: 300px;
  background-size: 100% 100%;
  margin: auto auto;
  position: relative;
  top: 40%;
}
<div id="blue">
  <div id="home-arrow">
    <div id="circle-arrow"></div>
  </div>
</div>

Upvotes: 0

Related Questions