Liste öğesinde gezinirken arka plan resmini değiştirme

Question

Ekran görüntüsünde gördüğünüz gibi, sıralanmamış bir liste var. Şimdi bu listenin div bir arka plan görüntüsüne sahiptir. Yapmak istediğim, fareyi bir liste öğesinin üzerine getirdiğimde arka plan görüntüsünü değiştirmek. Her öğenin arka planı farklı bir görüntüye değiştirmesi gerektiğini unutmayın. Bunu nasıl yaparım? Sadece tek bir, birden çok görüntüye nasıl değiştirileceğine dair cevaplar buldum.

Ekran görüntüsü.

Zaten listesinin ilk öğe üzerinde süpürdü ettik.

div 'ın CSS:

.body { 
    display: block; 
    float: left; 
    background-image: url("bgdef.jpg"); 
    background-repeat: no-repeat; 
    position: static; 
    width: 100%; 
    height: auto; 
    margin: 0; 
} 

.menu { 
    width: 250px; 
    padding: 0; 
    margin: 100px 0px 33% 75%; 
    list-style-type: none; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-user-drag: none; 
} 

.menu a:link, 
a:visited, 
a:hover, 
a:active { 
    text-decoration: none; 
    bottom: auto; 
    padding-bottom: auto; 
    text-shadow: none; 
} 

.menu li { 
    background-color: white; 
    margin: 10px; 
    padding: 3px 0 3px 10%; 
    border-radius: 10PX 0 0 10px; 
    font-size: 20px; 
} 

.menu li:hover { 
    background-color: green; 
    margin-right: 18px; 
    margin-left: 1px; 
} 

Answer 1

yalnızca CSS yapabilirsiniz kullanabilirsiniz. Bu bir hile ve çoğu durumda JS kullanmanız gerekecek, ancak çalışma ve iyi çalışıyor!

.wrapper { 
 
    width:900px; 
 
    height:600px; 
 
    position:relative; 
 
} 
 

 
.item { 
 
    position:relative; 
 
    z-index:1; 
 
} 
 

 
.bg { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
     width: 100%; 
 
    height: 100%; 
 
} 
 

 
.bg img { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    opacity:0; 
 
    transition:all .3s ease; 
 
} 
 

 
.bg img:nth-child(1), 
 
.item:nth-child(1):hover ~ .bg img:nth-child(1), 
 
.item:nth-child(2):hover ~ .bg img:nth-child(2), 
 
.item:nth-child(3):hover ~ .bg img:nth-child(3) { 
 
    opacity:1; 
 
}

<div class="wrapper"> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <div class="bg"> 
 
     <img src="http://i.stack.imgur.com/tq1uR.jpg" /> 
 
     <img src="http://i.stack.imgur.com/ZAy9V.jpg" /> 
 
     <img src="http://i.stack.imgur.com/xfvXS.jpg" /> 
 
    </div> 
 
    </div>

Answer 2

aşağıdaki kod parçacığını gösterilen yöntemi kullanarak, onmouseover niteliği hem A olurdu: bir değişkene her liste öğesi atanan görüntünün kaynağını Mağaza sırasıyla, sonra B: Arka plan görüntüsünün kaynağını değiştirerek divunuzun css arka plan görüntüsünü (bir ID aracılığıyla) değiştiren bir işlev çağırın.

<script type="text/javascript"> 
     var pictureI; 
     function changeBckGrnd(){ 
      document.getElementById("nameOfDiv").style.backgroundImage = "url('picSrc')"; 

     } 
    </script> 
    <ul> 
     <li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 1</li> 
     <li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 2</li> 
     <li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 3</li> 
     <li onmouseover="picSrc=*INSERT IMAGE SOUCRE HERE*; changeBckGrnd()">Image 4</li> 
    </ul> 

Not: Gönderiniz CSS oldu, ama javascript etiketli, bu yüzden JavaScript açık olduğunu varsaydık. Hiçbir CSS ebeveyn seçici hala olmadığından

Answer 3

jQuery

#container { 
 
    width: 800px; 
 
    height: 600px; 
 
    background: url(http://filepic.ru/file/1441522670.jpg); 
 
} 
 
#container li { 
 
    display: block; 
 
    margin: 5px; 
 
    float: right; 
 
    clear: both; 
 
    background-color: #fff; 
 
    width: 150px; 
 
} 
 
#container li:hover { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <ul> 
 
    <li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522623.jpg)');">1</li> 
 
    <li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522645.jpg)');">2</li> 
 
    <li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522653.jpg)');">3</li> 
 
    <li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522662.png)');">4</li> 
 
    <li onmouseover="$('#container').css('background','url(http://filepic.ru/file/1441522670.jpg)');">5</li> 
 
    </ul> 
 
</div>

Answer 4

onunla başa js kullanabilirsiniz (Tam Sayfa Çalışırken görün).