Change div Background Image when hovering on another div
up vote
0
down vote
favorite
I'm trying to create an interactive map on which some continents are highligthed when you hover on them and I am using multiple images to do so. Concretely, I am trying to change the background-image set in one div when I hover on certain parts of the background.
In the CSS code, I am using the tilde selector but it does not seem to work. Could you help me finding the issue please?
HTML Code:
<html>
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
</html>
CSS Code:
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}
Thanks for you help !
html css
asked Nov 8 at 0:13
A.Gonzalez
1
add a comment |
up vote
0
down vote
favorite
I'm trying to create an interactive map on which some continents are highligthed when you hover on them and I am using multiple images to do so. Concretely, I am trying to change the background-image set in one div when I hover on certain parts of the background.
In the CSS code, I am using the tilde selector but it does not seem to work. Could you help me finding the issue please?
HTML Code:
<html>
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
</html>
CSS Code:
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}
Thanks for you help !
html css
asked Nov 8 at 0:13
A.Gonzalez
1
Do you want to show the entire "continent" image as the background image when hovered on a particular continent? Also, provide us with codepen/jsfiddle and the expected output.
– krishna_tandon
Nov 8 at 0:33
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm trying to create an interactive map on which some continents are highligthed when you hover on them and I am using multiple images to do so. Concretely, I am trying to change the background-image set in one div when I hover on certain parts of the background.
In the CSS code, I am using the tilde selector but it does not seem to work. Could you help me finding the issue please?
HTML Code:
<html>
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
</html>
CSS Code:
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}
Thanks for you help !
html css
asked Nov 8 at 0:13
A.Gonzalez
1
I'm trying to create an interactive map on which some continents are highligthed when you hover on them and I am using multiple images to do so. Concretely, I am trying to change the background-image set in one div when I hover on certain parts of the background.
In the CSS code, I am using the tilde selector but it does not seem to work. Could you help me finding the issue please?
HTML Code:
<html>
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
</html>
CSS Code:
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}
Thanks for you help !
html css
html css
asked Nov 8 at 0:13
A.Gonzalez
1
asked Nov 8 at 0:13
A.Gonzalez
1
asked Nov 8 at 0:13
A.Gonzalez
1
asked Nov 8 at 0:13
A.Gonzalez
1
asked Nov 8 at 0:13
A.Gonzalez
1
1
Do you want to show the entire "continent" image as the background image when hovered on a particular continent? Also, provide us with codepen/jsfiddle and the expected output.
– krishna_tandon
Nov 8 at 0:33
add a comment |
Do you want to show the entire "continent" image as the background image when hovered on a particular continent? Also, provide us with codepen/jsfiddle and the expected output.
– krishna_tandon
Nov 8 at 0:33
Do you want to show the entire "continent" image as the background image when hovered on a particular continent? Also, provide us with codepen/jsfiddle and the expected output.
– krishna_tandon
Nov 8 at 0:33
Do you want to show the entire "continent" image as the background image when hovered on a particular continent? Also, provide us with codepen/jsfiddle and the expected output.
– krishna_tandon
Nov 8 at 0:33
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
The ~ selector is the sibling selector, it can only select elements at the same level. In your code .map is the parent element and there is no "parent" selector in CSS.
You can fix this however by moving .map inside and wrapping in a container element.
.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>answered Nov 8 at 0:31
itodd
1,975177
add a comment |
up vote
0
down vote
Unfortunately there is currently no parent selector in CSS, but you can achieve this using JS. In this example I'm using jQuery to update the parent's background color (you would have to update the background image).
WORKING FIDDLE
HTML:
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
CSS
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
JS
$(".americas").hover(function () {
$(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari").hover(function () {
$(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari2").hover(function () {
$(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
});
$(".ap").hover(function () {
$(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
});
answered Nov 8 at 0:31
Brian Moreno
631725
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
The ~ selector is the sibling selector, it can only select elements at the same level. In your code .map is the parent element and there is no "parent" selector in CSS.
You can fix this however by moving .map inside and wrapping in a container element.
.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>answered Nov 8 at 0:31
itodd
1,975177
add a comment |
up vote
0
down vote
The ~ selector is the sibling selector, it can only select elements at the same level. In your code .map is the parent element and there is no "parent" selector in CSS.
You can fix this however by moving .map inside and wrapping in a container element.
.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>answered Nov 8 at 0:31
itodd
1,975177
add a comment |
up vote
0
down vote
up vote
0
down vote
The ~ selector is the sibling selector, it can only select elements at the same level. In your code .map is the parent element and there is no "parent" selector in CSS.
You can fix this however by moving .map inside and wrapping in a container element.
.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>answered Nov 8 at 0:31
itodd
1,975177
The ~ selector is the sibling selector, it can only select elements at the same level. In your code .map is the parent element and there is no "parent" selector in CSS.
You can fix this however by moving .map inside and wrapping in a container element.
.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>.map,
.map-wrapper {
position:fixed;
width:960px;
height:540px;
}
.map {
background-image: url(World_Map.jpg);
z-index: -1;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
/* Hover */
.americas:hover ~ .map{
background-image: url(Americas_Map.jpg);
}
.emeari:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.emeari2:hover ~ .map{
background-image: url(Emeari_Map.jpg);
}
.ap:hover ~ .map{
background-image: url(Asia_Map.jpg);
}<div class="map-wrapper">
<div class="americas"></div>
<div class="emeari"></div>
<div class="emeari2"></div>
<div class="ap"></div>
<div class="map"></div>
</div>answered Nov 8 at 0:31
itodd
1,975177
answered Nov 8 at 0:31
itodd
1,975177
answered Nov 8 at 0:31
itodd
1,975177
answered Nov 8 at 0:31
itodd
1,975177
1,975177
add a comment |
add a comment |
up vote
0
down vote
Unfortunately there is currently no parent selector in CSS, but you can achieve this using JS. In this example I'm using jQuery to update the parent's background color (you would have to update the background image).
WORKING FIDDLE
HTML:
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
CSS
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
JS
$(".americas").hover(function () {
$(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari").hover(function () {
$(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari2").hover(function () {
$(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
});
$(".ap").hover(function () {
$(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
});
answered Nov 8 at 0:31
Brian Moreno
631725
add a comment |
up vote
0
down vote
Unfortunately there is currently no parent selector in CSS, but you can achieve this using JS. In this example I'm using jQuery to update the parent's background color (you would have to update the background image).
WORKING FIDDLE
HTML:
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
CSS
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
JS
$(".americas").hover(function () {
$(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari").hover(function () {
$(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari2").hover(function () {
$(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
});
$(".ap").hover(function () {
$(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
});
answered Nov 8 at 0:31
Brian Moreno
631725
add a comment |
up vote
0
down vote
up vote
0
down vote
Unfortunately there is currently no parent selector in CSS, but you can achieve this using JS. In this example I'm using jQuery to update the parent's background color (you would have to update the background image).
WORKING FIDDLE
HTML:
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
CSS
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
JS
$(".americas").hover(function () {
$(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari").hover(function () {
$(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari2").hover(function () {
$(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
});
$(".ap").hover(function () {
$(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
});
answered Nov 8 at 0:31
Brian Moreno
631725
Unfortunately there is currently no parent selector in CSS, but you can achieve this using JS. In this example I'm using jQuery to update the parent's background color (you would have to update the background image).
WORKING FIDDLE
HTML:
<div class="map">
<div class="americas">
</div>
<div class="emeari">
</div>
<div class="emeari2">
</div>
<div class="ap">
</div>
</div>
CSS
.map {
position:fixed;
background-image: url(World_Map.jpg);
width:960px;
height:540px;
}
.americas {
position:absolute;
width:364.8px;
height:540px;
border: 1px solid black;
}
.emeari {
position: absolute;
width: 297.6px;
height: 540px;
left: 364.8px;
border: 1px solid black;
}
.emeari2 {
position:absolute;
width:297.6px;
height:183.6px;
right: 0px;
border: 1px solid black;
}
.ap {
position:absolute;
width:297.6px;
height:356.4px;
bottom: 0px;
right: 0px;
border: 1px solid black;
}
JS
$(".americas").hover(function () {
$(this).parent().css("background", "red"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari").hover(function () {
$(this).parent().css("background", "blue"); // CHANGE IMAGE PROPERTY HERE
});
$(".emeari2").hover(function () {
$(this).parent().css("background", "green"); // CHANGE IMAGE PROPERTY HERE
});
$(".ap").hover(function () {
$(this).parent().css("background", "orange"); // CHANGE IMAGE PROPERTY HERE
});
answered Nov 8 at 0:31
Brian Moreno
631725
answered Nov 8 at 0:31
Brian Moreno
631725
answered Nov 8 at 0:31
Brian Moreno
631725
answered Nov 8 at 0:31
Brian Moreno
631725
631725
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53199800%2fchange-div-background-image-when-hovering-on-another-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you want to show the entire "continent" image as the background image when hovered on a particular continent? Also, provide us with codepen/jsfiddle and the expected output.
– krishna_tandon
Nov 8 at 0:33