将鼠标悬停在课程上会影响另一个元素

所以我试图做到这一点，如果你将鼠标悬停在wrapperleft类上，cardinfop1的背景颜色会发生变化，但它对我不起作用。我究竟做错了什么？将鼠标悬停在课程上会影响另一个元素

代码及以下小提琴：

<div id="cardinfop1"> 
    <div class="cardtitle">Fire Ship</div> 
    <img class="cardimage" src="assets/fireshipcard.svg" /> 
    <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div> 
</div> 


<div id="player1card1wrapper" class="wrapper wrapperleft"><img id="player1card1" class="card player1card"/></div> 
<div id="player1card2wrapper" class="wrapper wrapperleft"><img id="player1card2" class="card player1card"/></div> 
<div id="player1card3wrapper" class="wrapper wrapperleft"><img id="player1card3" class="card player1card"/></div> 
<div id="player1card4wrapper" class="wrapper wrapperleft"><img id="player1card4" class="card player1card"/></div> 
<div id="player1card5wrapper" class="wrapper wrapperleft"><img id="player1card5" class="card player1card"/></div> 
<div id="player1card6wrapper" class="wrapper wrapperleft"><img id="player1card6" class="card player1card"/></div> 
<div id="player1card7wrapper" class="wrapper wrapperleft"><img id="player1card7" class="card player1card"/></div> 
<div id="player1card8wrapper" class="wrapper wrapperleft"><img id="player1card8" class="card player1card"/></div> 


<style> 
.wrapper { 
    width: 90px; 
    height: 123.75px; 
    margin-top: 15px; 
    background-color: pink; 
} 

.wrapperleft { 
    float: left; 
    margin-left: 18px; 
} 

#cardinfop1 { 
    width: 350px; 
    height: 250px; 
    background-color: white; 
    margin-left: 126.62px; 
} 

#wrapperleft:hover ~ #cardinfop1 { 
    background-color: green; 
} 
</style>

这里是一个fiddle

来源

2017-01-10 evilgenious448

有两个问题在这里：

您必须使用类选择：.wrapperleft
你是使用~运算符错误

一般兄弟组合子由与“波浪线”（U + 007E，〜）字符分隔简单选择的两个序列的。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一序列表示的元素在第二个表示的元素之前（不一定立即）。

我改变了#cardinfop1和.wrapper元素的顺序，它工作正常。试试updated fiddle

来源

2017-01-10 08:52:06 Chris

除了我的小班和id选择器问题（这只是疏忽），它仍然没有工作。但是随着你交换元素的顺序，这就是我不知道的。非常感谢克里斯。 – evilgenious448

欢迎您@ evilgenious448 – Chris

当wrapperLeft是一个类时，您已经添加了#wrapperLeft：hover。您已使用〜＃cardinfop1，其中cardinfop1在任何wrapperLeft类之前。

现在至于你的要求，没有可能的方式来选择基于下一个元素的CSS中的前一个元素。

但有一种方法可以做到这一点。

<div class="parent"> 

    <div id="cardinfop1"> 
     <div class="cardtitle">Fire Ship</div> 
     <img class="cardimage" src="assets/fireshipcard.svg" /> 
     <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div> 
    </div> 


     <div id="player1card1wrapper" class="wrapper wrapperleft"> 
      <img id="player1card1" class="card player1card"/> 
     </div> 
     <div id="player1card2wrapper" class="wrapper wrapperleft"> 
      <img id="player1card2" class="card player1card"/> 
     </div> 
     <div id="player1card3wrapper" class="wrapper wrapperleft"> 
      <img id="player1card3" class="card player1card"/> 
     </div> 
     <div id="player1card4wrapper" class="wrapper wrapperleft"> 
      <img id="player1card4" class="card player1card"/> 
     </div> 
     <div id="player1card5wrapper" class="wrapper wrapperleft"> 
      <img id="player1card5" class="card player1card"/> 
     </div> 
     <div id="player1card6wrapper" class="wrapper wrapperleft"> 
      <img id="player1card6" class="card player1card"/> 
     </div> 
     <div id="player1card7wrapper" class="wrapper wrapperleft"> 
      <img id="player1card7" class="card player1card"/> 
     </div> 
     <div id="player1card8wrapper" class="wrapper wrapperleft"> 
      <img id="player1card8" class="card player1card"/> 
     </div> 
    </div> 
<style> 
.parent{ 
    height:0px 
} 
.parent #cardinfop1 { 
    background-color: white; 
} 
.parent:hover #cardinfop1 { 
    background-color: green; 
} 
#cardinfop1:hover { 
    background-color: white !important; 
} 
.parent > .wrapperleft:hover{ 
    background-color: pink; 
} 

.wrapper { 
    width: 90px; 
    height: 123.75px; 
    margin-top: 15px; 
    background-color: pink; 
} 
.wrapperleft { 
    float: left; 
    margin-left: 18px; 
} 

#cardinfop1 { 
    width: 350px; 
    height: 250px; 
    background-color: white; 
    margin-left: 126.62px; 
} 
</style>

来源

2017-01-10 09:11:15 rambo

无需为此解决方案进行交换或定位，但定义了三个新的CSS类，并且已经移除了一个 – rambo

你很近。 ~是为一般后继兄弟姐妹，这意味着它将针对之后的兄弟姐妹。此外，您正在引用#wrapperleft，但您没有任何元素作为ID属性。它应该是：.wrapperleft

解决方案：把你的cardinfop1是启动悬停的元素后：

  <div id="player1card2wrapper" class="wrapper wrapperleft"><img id="player1card2" class="card player1card"/></div> 
      <div id="player1card3wrapper" class="wrapper wrapperleft"><img id="player1card3" class="card player1card"/></div> 
      <div id="player1card4wrapper" class="wrapper wrapperleft"><img id="player1card4" class="card player1card"/></div> 
      <div id="player1card5wrapper" class="wrapper wrapperleft"><img id="player1card5" class="card player1card"/></div> 
      <div id="player1card6wrapper" class="wrapper wrapperleft"><img id="player1card6" class="card player1card"/></div> 
      <div id="player1card7wrapper" class="wrapper wrapperleft"><img id="player1card7" class="card player1card"/></div> 
      <div id="player1card8wrapper" class="wrapper wrapperleft"><img id="player1card8" class="card player1card"/></div> 
    <div id="cardinfop1"> 
      <div class="cardtitle">Fire Ship</div> 
      <img class="cardimage" src="assets/fireshipcard.svg" /> 
      <div class="carddescription">This card costs 3 gunpowder to use and will deal 5 damage to your opponent.</div> 
      </div>

，然后修复你的CSS如下：

.wrapperleft:hover ~#cardinfop1 { 
background-color: green; 
}

这里有一个小提琴： http://jsfiddle.net/sjrmfv56/1/

虽然你需要修正你的CSS定位。

来源

2017-01-10 09:11:34 Monty

将鼠标悬停在课程上会影响另一个元素

回答

相关问题