背景图像不显示时，悬停在CSS

得到这个代码的工作：背景图像不显示时，悬停在CSS

<style type="text/css"> 
     body { 
      margin: 0px; 
     } 

     #hallo { 
      width: 960px; 
      height: 600px; 
      position: relative; 
      margin: auto; 
      border: solid 1px yellow; 
     } 
     #bg { 
      width: 960px; 
      height: 600px; 
      position: absolute; 
      background-image:url(torres.jpg); 
      background-size: 960px 600px; 
     } 

     #t1 { 
      width: 100px; 
      height: 100px; 
      position: absolute; 
      background-size: 100px 100px; 
      border: solid 1px white; 
     } 

     #t1 { 
      top: 100px; 
      left: 600px; 
      background-image:url(torres1.jpg); 
     } 

     #t1:hover ~ #bg { 
      position: absolute; 
      background-image:url(torres1.jpg); 
      background-size: 960px 600px; 
     } 


    </style> 

<section id="hallo"> 

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

</section>

但是我有一个问题。当我使用鼠标悬停时，t1 div没有任何反应。背景图像不会更改为“torres1.jpg”。有没有解决方法？

我不能为此使用Java。

来源

2012-11-12 user1770961

您还没有定义的:hover州为#t1元素：

#t1 { /* non-hovered */ 
    top: 100px; 
    left: 600px; 
} 

#t1:hover { /* hovered-over */ 
    background-image:url(torres1.jpg); 
}

编辑响应从OP评论：

啊，你不明白我的问题。我正在寻找的是background-image在#bg当鼠标悬停在#t1格上。

这无法发生（yet），CSS可以只影响出现在DOM 后比其互动你想它的样式当前元素的元素。

因此当你能基础上，#bg:hover风格#t1，但你不能风格父母，或者以前的同胞，以儿童或更高版本同胞的:hover。

来源

2012-11-12 22:09:03

啊，你不明白我的问题。我正在寻找的是#bg中的背景图像在鼠标悬停在＃t1 div上时发生变化。 – user1770961

Okei，所以如果我想让它工作，我需要在#bg之前放置＃t1？那么这个职位呢？ – user1770961

像大卫托马斯说，你不能单独在CSS中做到这一点，但我认为这可以使用javascript – Goaler444

交换#bg和#t1和你的兄弟选择应该工作：

<section id="hallo"> 
    <div id="t1"></div> 
    <div id="bg"></div> 
</section>

来源

2012-11-12 22:17:04

背景图像不显示时，悬停在CSS

回答

相关问题