While creating a navigation bar using the <ul> element, I have come up with the following CSS code:
.nav {
list-style: none;
background: url(/images/nav.png) no-repeat;
width: 666px;
height: 60px;
}
.nav li {
font-size: 0px;
background: url(/images/nav.png) no-repeat;
width: 120px;
height: 60px;
display: block;
float: left;
position: relative;
}
.nav .navhome {
background-position: -31px 0;
left: 31px;
}
.nav .navA {
background-position: -152px 0;
left: 32px;
}
.nav .navB {
background-position: -273px 0;
left: 33px;
}
.nav .navC {
background-position: -394px 0;
left: 34px;
}
.nav .navD {
background-position: -515px 0;
left: 35px;
}
.nav .navhover {
background-position-y: -60px;
}
.nav .navcurrent {
background-position-y: -120px;
cursor: default;
pointer-events: none;
}
In order to move the background image vertically based on mouse hover over buttons, I used a jQuery function that adds classes like .navhover and .navcurrent dynamically. However, upon validating the code, I realized that background-position-y is not a standard property. Additionally, pointer-events does not work in Firefox and Opera. Is there an alternative method to only adjust the vertical positioning of the background? Furthermore, how can I disable click functionality on the button with the class .navcurrent?