I posted this last week and tried everything but still cant get it working. I will post a link to my code pen (images aren't loaded in so you wont see it but you can check out the code and see what I've messed up) In the end I am trying to hover over #market and it change the content in colc (or any col for that matter) to a different image. in the head you will see my attempt but it isnt working. Thank you for any help you can provide. :)
https://codepen.io/callum-mcleod/pen/rRwRmm
<script>
$('#market').hover(function () {
$('#colc').css('content', 'url("_img/images/blue3.png")');
});
Given the HTML layout, as taken from the linked to codepen snippet:
<div class='rowmonitor'>
<div id='cola'></div>
<div id='colb'></div>
<div id='colc'></div>
</div>
<div class='rowblock'>
<a href='graphic.html'>
<div id='graphic'></div>
</a>
<a href='web.html'>
<div id='web'></div>
</a>
<a href='market.html'>
<div id='market'></div>
</a>
</div>
In the CSS of the pen you have
#market:hover ~ #colc
As you found out, this selector will not work for the structure of HTML that you have. There is no previous sibling type selector - ~ is for accessing the following element. To accomplish the switching of background images ( weirdly using the content attribute rather than background-image ) you'd need to resort to javascript of some flavour or other. The following demo uses vanilla javascript and might, or might not, offer help - should be easy to modify to use your images rather than images from the interwebs.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Change DIV element content on hover over another element</title>
<style>
body *{display:block;box-sizing:border-box;}
.rowmonitor,
.rowblock{width:50%;float:left;clear:none;margin:0;padding:0;}
.rowmonitor > div,
.rowblock > a{width:33%;float:none;clear:none;margin:1rem; padding:0.25rem;}
.rowblock > a > div{padding:1rem;width:100%;height:3rem;}
/* randomly selected source images */
#cola{content:url(https://i.pinimg.com/originals/24/fd/a5/24fda5fb3317da38db13209cfd2651b9.gif)}
#colb{content:url(https://cdn.shopify.com/s/files/1/0094/5691/0395/t/5/assets/LOGO_belif_200_50_800x800.png?15542124892649134758);}
#colc{content:url(https://mosaic01.ztat.net/nvg/media/brandxl/3ea6e361-fada-43bd-9a28-368f176e6dcd.jpg);}
/* more randomly selected background images */
#graphic{background:url(https://www.micahjtphotos.com/img/s/v-2/p3109013942-11.jpg)}
#web{background:url(https://www.countryside-trust.org.uk/userfiles/events/images/blue_moon_-_cockington_middle_lake_1.jpg?w=200&h=100&zc=1)}
#market{background:url(https://www.tbhpartnership.org.uk/content/uploads/2016/09/EnglemerePond-200x100.jpg)}
.rowblock > a > div{background-size:100%!important;background-repeat:no-repeat!important;background-position:center}
</style>
<script>
document.addEventListener('DOMContentLoaded', e=>{
let matrix={
cola:{
over:'https://i2.wp.com/www.sphk.org/wordpress/wp-content/uploads/2018/01/the-river.jpg?fit=300%2C100&ssl=1',
out:''
},
colb:{
over:'https://render.fineartamerica.com/images/rendered/search/poster/images-medium-5/karst-landscape-along-the-river-li-panoramic-images.jpg',
out:''
},
colc:{
over:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsFI7Ra8KNFWCAr_kEXEkrK9Z1hYOK0Hm8WVNno7b5X3glATzo',
out:''
}
};
/* get reference to the targets whose background will be changed */
let cols=Array.prototype.slice.call( document.querySelectorAll('.rowmonitor > div') );
/* further populate matrix with initial content images */
cols.forEach( function( div ){
/* this will store: url( https://www.example.com/img.jpg ) */
matrix[ this.id ]=getComputedStyle( div ).content;
})
/* assign event listeners to each source rowblock > a element */
Array.prototype.slice.call( document.querySelectorAll('.rowblock > a') ).forEach( a => {
/* change the images on rollover */
a.addEventListener( 'mouseover', evt=>{
cols.forEach( div=>{
/* explicitly set the url property */
div.style.content='url(' + matrix[ div.id ].over + ')';
});
});
/* restore the images on rollout */
a.addEventListener( 'mouseout', evt=>{
cols.forEach( div=>{
/* as we stored the url property can set directly */
div.style.content=matrix[ div.id ].out;
});
});
});
});
</script>
</head>
<body>
<!-- other html content -->
<div class='rowmonitor'>
<div id='cola'></div>
<div id='colb'></div>
<div id='colc'></div>
</div>
<div class='rowblock'>
<a href='graphic.html'>
<div id='graphic'></div>
</a>
<a href='web.html'>
<div id='web'></div>
</a>
<a href='market.html'>
<div id='market'></div>
</a>
</div>
<!-- more html content -->
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments