將元素懸停在一個Div中，以更改另一個Div的背景圖像CSS

我想在將鼠標懸停在頁面上的其他元素上時更改div的背景圖像。例如，在我的項目中，我有兩個div，如果我將內容懸停在「自然」內容中，那麼它將更改showdiv的背景圖像。將元素懸停在一個Div中，以更改另一個Div的背景圖像CSS

我的代碼如下：

CSS：

.divOne #one:hover ~ .show{ background-image: url(nature.jpg); } 
    .divOne two:hover ~ .show{ background-image: url(bird.jpg); }    
    #show{ 
     height: 100px; 
     width: 100px;   
    }

HTML：

<div class="divOne"> 
    <a id="one" href="#"> nature </a> 
    <a id="two" href="#"> bird </a> 
</div> 

<div class="show"></div>

來源

2016-02-15 M.Dineshkumar

'＃one'和'＃two'沒有'＃show'以前的兄弟姐妹（這是什麼'〜'代表）。將'＃show'放在'＃divOne'後面的鏈接才能正常工作 – fcalderan

抱歉。它必須是兩個不同的div。請忽略CSS代碼。告訴我需要更改css和html代碼才能實現我的目標。我知道它會工作，當我把第二個div的第一個div。但我應該是兩個不同的div。 –

使用給定的標記，這種效果在純CSS中是不可能的 – fcalderan

請使用：

$(".divOne").find("#one").hover(function(){ 
 
\t $(".show").css("background","green"); 
 
}); 
 
$(".divOne").find("#two").hover(function(){ 
 
\t $(".show").css("background","blue"); 
 
}); 
 
$(".divOne #one, .divOne #two").mouseleave(function(){ 
 
$(".show").css("background","none"); 
 
});

<div class="divOne"> 
 
    <a id="one" href="#"> nature </a><br/> 
 
    <a id="two" href="#"> bird </a> 
 
</div> 
 

 
<div class="show"> 
 
Test Background 
 
</div>

來源

2016-02-15 10:36:36 javidrathod

請讓我知道如果有任何查詢... – javidrathod

https://jsfiddle.net/ukgvexsu/4/示例代碼 – javidrathod

我有一個不同的例子，但與您有關。 #red { background-color：red; } #green { background-color：green; } #red：hover〜＃green { color：orange; } 紅色綠色

來源

2016-02-15 10:41:48

既然你提到你想看看在你的註釋中使用JS/jQuery的，你可以使用jQuery的toggleClass並將其綁定到一個懸停事件：https://jsfiddle.net/0pe4mn4o/

jQuery：

$("#one").hover(function() { 
    $(".show").toggleClass("green"); 
}); 
$("#two").hover(function() { 
    $(".show").toggleClass("red"); 
});

然後用CSS就可以將樣式.green/.red班做什麼，我們喜歡當附加在.show DIV（你可以使用一個background-image如果你喜歡）。

CSS：

.green { 
    background-color: green; 
} 
.red { 
    background-color: red; 
} 
#show{ 
    height: 100px; 
    width: 100px; 
} 
.divOne a { 
    display: block; 
    padding: 20px; 
    margin:10px; 
}

HTML：

<div class="divOne"> 
    <a id="one" href="#"> nature </a> 
    <a id="two" href="#"> bird </a> 
</div> 
<div class="show">SHOW DIV</div>

來源

2016-02-15 10:47:15

將元素懸停在一個Div中，以更改另一個Div的背景圖像CSS

回答

相關問題