Byte_Monster Byte_Monster - 4 months ago 9
HTML Question

Pseudo class hover not working on block

I need to create a landing page for a simple binary option: Click on the left logo and you go to page 1 click on the right one and you go to page 2.

I have manged to create the main page and add logos to it. I have a runnable version of the code here:
https://jsfiddle.net/hxo2nmc2/# and my orriginal code on github: https://github.com/bytemonster/simple_split_page_template

/* Pen-specific styles */
* {
box-sizing: border-box;
}
html, body, section, div {
height: 100%;
}

body {
color: #fff;
font-family: sans-serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
/*text-shadow: 0 2px 2px #b6701e;*/
margin: 0;
}

section {
width: 100%;
}

article {
position: relative;
top: 50%;
padding: 1rem;
text-align: center;
transform: translate(-50%, -50%);
width: 30%;
height:20vh;
display: block;
z-index: 1000;

}

article.left{
left: 75%;
background-image: url('http://static2.businessinsider.com/image/5654150584307663008b4ed8/this-tech-recruiter-owns-the-most-hipster-cat-on-instagram.jpg');
background-repeat: no-repeat;
background-position: bottom;
background-size:contain;
}


article.right{
clear:both;
left: 25%;
background-image: url('http://static2.businessinsider.com/image/5654150584307663008b4ed8/this-tech-recruiter-owns-the-most-hipster-cat-on-instagram.jpg');
background-repeat: no-repeat;
background-position: bottom;
background-size:contain;
}

article.left:hoover{
background-image: url('http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg');
background-repeat: no-repeat;
background-position: bottom;
background-size:contain;
}

article.right:hoover{
background-image: url('http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg');
background-repeat: no-repeat;
background-position: bottom;
background-size:contain;
}

h1 {
display: block;
position: relative;
top: 40%;
/*padding: 1rem;*/
width: 30%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
margin: 0 0 0.75rem 0;
}

h1.left{
left: 75%;
}

h1.right{
left: 25%;
}

/* Pattern styles */
.left-half {
background-color: #B9B8C1;
float: left;
width: 50%;
}
.right-half {
background-color: #1F1F23;
float: left;
width: 50%;
}


My issue is that even when I add a :hoover pseudo class the background image does not change. I tried changing the z-index and displaying explicitly as a block.

Any comments on the code?

Answer

It is spelt :hover with one o. This would have been picked up by a validator.

To hover is to float over something (i.e. float your mouse pointer over the element).

To hoover is to clean something with a vacuum cleaner.