当鼠标悬停在链接上时，更改div的背景图像

我有一个导航菜单，并且当我将鼠标悬停在每个菜单链接上时，我想将相邻div的背景图像更改为不同的图像。我试过使用jquery添加具有不同背景图像的side-menu1类。那么这将需要复制每个5个环节当鼠标悬停在链接上时，更改div的背景图像

$(document).ready(function() { 
    $('.evo').hover(function() { 
    $('.side-menu').addClass('.side-menu1'); 
    }, function() { 
    $('.side-menu').removeClass('.side-menu1'); 
    }); 
});

nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: 100%; 
    text-align: left; 
    box-sizing: border-box; 
    z-index: 10001; 
    left: -100%; 
} 

nav ul { 
    width: 50%; 
    float: left; 
    list-style-type: none; 
    padding: 0; 
    height: 100%; 
    margin: 0; 
} 

nav ul li { 
    width: 100%; 
    height: 20%; 
    box-sizing: border-box; 
    padding-top: 9vh; 
    background: rgba(0, 0, 0, 1); 
    transition: all 1s; 
    position: relative; 
    padding-left: 80px; 
} 

nav ul li a { 
    font-family: 'battle'; 
    color: white; 
    font-size: 14px; 
    letter-spacing: 14px; 
    text-decoration: none; 
} 

nav ul li:hover { 
    background: rgba(0, 0, 0, 0.95); 
} 

.underline { 
    position: absolute; 
    bottom: 60px; 
    left: 0; 
    height: 1px; 
    background: rgba(38, 157, 171, 0.8); 
    width: 0%; 
    transition: all 1s ease-in-out; 
    display: block; 
    z-index: 10001; 
    margin-left: 80px; 
} 

nav ul li:hover .underline { 
    width: 260px; 
} 

.side-menu { 
    height: 100%; 
    width: 50%; 
    float: left; 
    background-image: url(../img/menu-donut.png); 
    transition: all 1s ease-in-out; 
} 

.side-menu1 { 
    background-image: url(../img/menu-hci.png); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav class="slideout-menu"> 
    <ul> 
    <li> 
     <a href="#">POTOCKI</a><span class="underline"></span> 
    </li> 
    <li class="evo"> 
     <a href="#">EVOLUTION</a><span class="underline"></span> 
    </li> 
    <li> 
     <a href="#">COLOUR IDEAS</a><span class="underline"></span> 
    </li> 
    <li> 
     <a href="#">FAT DONUT</a><span class="underline"></span> 
    </li> 
    <li> 
     <a href="#">SEAN CARVER</a><span class="underline"></span> 
    </li> 
    </ul> 
    <div class="side-menu"></div> 
</nav>

来源

2016-04-14 dmc

要小心addClass()功能。点在这里是无效的。

应该是这样的：

$(document).ready(function() { 
    $('.evo').hover(function() { 
    $('.side-menu').addClass('side-menu1'); 
    }, function() { 
    $('.side-menu').removeClass('side-menu1'); 
    }); 
});

Working example

来源

2016-04-14 21:15:35

当鼠标悬停在链接上时，更改div的背景图像

回答

相关问题