當鼠標懸停在鏈接上時，更改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的背景圖像

回答

相關問題