使用通用兄弟選擇器通過嵌套元素naviagate

嘿，我有一個關於一般兄弟選擇器的問題。使用通用兄弟選擇器通過嵌套元素naviagate

先來看看HTML：

<div id="layout-middle"> 
<div id="Center"> 
    <a class="col Picture1">Titel1</a> 
    <a class="col Picture2">Titel2</a> 
    <a class="col Picture3">Titel3</a> 
    <a class="col Picture4">Titel4</a> 
    <a class="col Picture5">Titel5</a> 
    <a class="col Picture6">Titel6</a> 
</div> 
</div> 

<div id="bg"></div>

CSS：

#layout-middle { 
    background: #d3d1ce url('Images/middle.jpg') top center repeat-x; 
    border-bottom: 4px solid #777674; 
} 
#Center { 
margin: 0 auto; 
display: table; 
} 
.col { 
border: 1px solid #3E414A; 
text-align: center; 
float: left; 
width: 160px; 
height: 375px; 
padding-top: 16px; 
margin-top: -93px; 
} 

#bg { 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: -1; 
background-image: url('Images/bg-top.jpg'); 
transition: .25s; 
pointer-events: none; 
}

#Bg只是所有元素後面的背景圖像。

所有圖像看起來像這樣：

.Image1{ 
background: url('Images/PictureXY.png') 0 0 no-repeat; 
}

現在我的問題是，當我將鼠標懸停例如圖片1如何我只能用CSS

的#bg背景圖片設置爲一個新的沒有的Javascript

通常我會是這樣的：

.col:hover ~ #bg{ 
    background-image:url('newimage.png') 
}

但是，這並不因爲嵌套元素的工作。我知道我可以用Javascript方便地做到這一點，但我的要求只說HTML & CSS

如果你有更好的東西讓我知道，它不一定是一般的兄弟姐妹選擇器。

來源

2015-12-09 Marvin Kayx

根據您當前的HTML結構是不可能的。你打開更改HTML？ –

是的，我開放的工作:)將工作:) –

正如我在我的評論中寫的，當前的html結構是不可能的。據規格：

一般兄弟組合子由與「波浪線」（U + 007E，〜）字符分隔簡單選擇的兩個序列的。由兩個序列代表的元素在文檔樹中共享相同的父代，並且由第一序列代表的元素在第二個代表的元素之前（不一定立即）。

但與下面的HTML，您可以：

#layout-middle { 
 
    background: #d3d1ce url('Images/middle.jpg') top center repeat-x; 
 
    border-bottom: 4px solid #777674; 
 
} 
 
#Center { 
 
    margin: 0 auto; 
 
    display: table; 
 
} 
 
.col { 
 
    border: 1px solid #3E414A; 
 
    text-align: center; 
 
    float: left; 
 
    width: 160px; 
 
    height: 375px; 
 
    padding-top: 16px; 
 
    margin-top: -93px; 
 
} 
 
#bg { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    background-image: url('Images/bg-top.jpg'); 
 
    transition: .25s; 
 
    pointer-events: none; 
 
} 
 

 
.col:hover ~ #bg{ 
 
    background-image:url('https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97100&w=200&h=100') 
 
}

<div id="layout-middle"> 
 
    <div id="Center"> 
 
    <a class="col Picture1">Titel1</a> 
 
    <a class="col Picture2">Titel2</a> 
 
    <a class="col Picture3">Titel3</a> 
 
    <a class="col Picture4">Titel4</a> 
 
    <a class="col Picture5">Titel5</a> 
 
    <a class="col Picture6">Titel6</a> 
 
    <div id="bg"></div><!-- move div here --> 
 
    </div> 
 
    
 
</div>

來源

2015-12-09 15:29:43

非常感謝它工作！ :) –

@MarvinKayx很高興我幫你:) –

對於給定當前結構的CSS，這是不可能的。

.col鏈接不是兄弟姐妹或#bg div的孩子，所以沒有可應用的CSS3選擇器。

唯一的選擇是移動#bg到的#Center格...那麼一般兄弟選擇將工作。

不改變HTML結構，您將需要JavaScript。

來源

2015-12-09 15:26:37

使用通用兄弟選擇器通過嵌套元素naviagate

回答

相關問題