सूची आइटम पर होवर करते समय पृष्ठभूमि छवि बदलना

Question

जैसा कि आप स्क्रीनशॉट में देख सकते हैं, मेरे पास एक अनियमित सूची है। इस सूची के div में पृष्ठभूमि छवि है। जब भी मैं सूची आइटम पर माउस को घुमाता हूं, तो मैं पृष्ठभूमि की छवि को बदलना चाहता हूं। ध्यान दें कि प्रत्येक आइटम को पृष्ठभूमि को एक अलग छवि में बदलना चाहिए। मैं यह कैसे करु? मुझे केवल जवाब मिल गए हैं कि एक से अधिक छवियों को कैसे बदला जाए।

यहां स्क्रीनशॉट है।

मैं पहले से ही इस सूची के पहले आइटम पर hovered है।

div के सीएसएस:

.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

आप केवल सीएसएस करके ऐसा कर सकते कर सकते हैं। यह एक चाल है और ज्यादातर मामलों में आपको जेएस का उपयोग करने की आवश्यकता होगी, लेकिन यह काम कर रहा है और अच्छा काम कर रहा है! (पूर्ण पृष्ठ में देखें)

.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

विधि निम्नलिखित कोड का टुकड़ा में दिखाया गया है का उपयोग करके आप onmouseover विशेषता दोनों एक होगा: एक चर करने के लिए प्रत्येक सूची आइटम को असाइन किया गया चित्र का स्रोत स्टोर क्रमशः, फिर बी: एक फ़ंक्शन को कॉल करें जो पृष्ठभूमि छवि के स्रोत को बदलकर आपके div (आईडी के माध्यम से) की सीएसएस पृष्ठभूमि छवि को बदलता है।

<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> 

नोट: आपकी पोस्ट सीएसएस में थी, लेकिन आपने जावास्क्रिप्ट को टैग किया, इसलिए मुझे लगता है कि आप जावास्क्रिप्ट के लिए खुले थे।

Answer 3

के बाद से वहाँ अभी भी है कोई CSS माता पिता चयनकर्ता आप उपयोग 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

आप js का उपयोग इसके साथ सौदा कर सकते हैं।

var imgsArr = [url1,url2,......] ;//array of backgroud img's url 
 
var container = $(".menu li"); //suppose you have linked in jquery 
 
function setBackgroudHover(imgArr,container) 
 
{ 
 
\t container.hover(function() { 
 
\t \t \t //mousein 
 
\t \t \t for(var i=0;i<imgArr.length;i++) 
 
      \t \t { 
 
      \t \t \t container.eq(i).css("background-image","url("+imgArr[i]+")") ; 
 
      \t \t } 
 
\t \t }, function() { 
 
\t \t \t //mouseout 
 
\t \t \t for(var i=0;i<imgArr.length;i++) 
 
      \t \t { 
 
      \t \t \t container.eq(i).css("background-image","") ; 
 
      \t \t } 
 
\t \t }); 
 
} 
 
setBackgroudHover(imgArr,container) ;