CSS悬停来改变其他元素
CSS Hover to change other elements
我用CSS做了这个导航栏,我希望当我把鼠标悬停在3个导航图标中的一个上时,它会改变主图像的背景位置。
我试了几种方法,但都没能使它们正常工作。
CSS
/* Nav Button 1 */
.nav1 {
float:left;
padding-top:20px;
border:none;
outline:none;
}
#nav1
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav1:hover
{
background-position: 0 -107px;
}
/* Nav Button 2 */
.nav2 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav2
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav2:hover
{
background-position: 0 -107px;
}
/* Nav Button 3 */
.nav3 {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#nav3
{
display: block;
width: 92px;
height: 107px;
background: url("images/triangle.png") no-repeat 0 0;
}
#nav3:hover
{
background-position: 0 -107px;
}
/* Nav Name */
.navname {
float:left;
padding-top:20px;
border:none;
outline:none;
padding-right: 0px;
}
#navname
{
display: block;
width: 228px;
height: 81px;
background: url("images/blank.png") no-repeat 0 0;
}