悬停时的Z索引

Question

对于正在建立的网站，我的图像下面带有浅灰色h1。 当我将鼠标悬停在图像上方时，文本应变为黑色，并且z索引应更改为位于图像上方。

颜色更改有效，z索引无效。 我的h1有位置：相对添加了它，所以这不是问题。

 $('#photo').mouseover(function() { $('#title').css.zIndex = "100" $('#title').css("color", "#000000") }); 

 #photo { z-index: 0; position: relative; } #photo:hover { z-index: 4; position: relative; } .titles { position: relative; } #title { position: relative; } 

 <div class="projects"> <h1 class="titles" id="title">Title</h1> <a href="#"><img src="https://graph.facebook.com/10158407872045403/picture?type=large" id="photo"></a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

另外，我也尝试使用

$('#title').css("z-index", "0")

我在这里做错了什么？

Answer 1

$('#title').css.zIndex = "100"不正确，但是您说过尝试的$('#title').css("z-index", "0")是正确的-只是，您在那里使用0而不是100 。 由于照片和标题均具有z-index: 0 ，并且照片位于标题之后，因此照片获胜。

如果您使用$('#title').css("z-index", "100") ，则可以使用（但请继续阅读）：

 $('#photo').mouseover(function() { $('#title').css("z-index", "100"); $('#title').css("color", "#000000") }); 

 #photo { z-index: 0; position: relative; top: -4em; } #photo:hover { z-index: 4; position: relative; } .titles { position: relative; color: grey; } #title { position: relative; } 

 <div class="projects"> <h1 class="titles" id="title">Title</h1> <a href="#"><img src="https://graph.facebook.com/10158407872045403/picture?type=large" id="photo"></a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

（我还在照片上添加了top: -4em;这样它实际上与标题重叠了。）

---

话虽如此，我会尝试为此使用CSS。 如果我们为img周围a包装器提供一个类，并且将标题放在该类之后而不是之前（因为您在视觉上总是使它们重叠），则可以使用相邻的同级组合器 （ + ）或通用（以下）同级组合器 （ ~ ）和:hover伪类：

.photo-wrapper:hover ~ h1.titles, h1.titles:hover {
  z-index: 100;
  color: black;
}

如果用户将照片或标题悬停，则会自动将标题变黑并将z顺序上移：

 #photo { z-index: 0; position: relative; } #photo:hover { z-index: 4; position: relative; } .titles { position: relative; color: grey; } #title { position: relative; top: -4em; } .photo-wrapper:hover ~ h1.titles, h1.titles:hover { z-index: 100; color: black; } 

 <div class="projects"> <a href="#" class="photo-wrapper"><img src="https://graph.facebook.com/10158407872045403/picture?type=large" id="photo"></a> <h1 class="titles" id="title">Title</h1> </div> 

---

话虽如此，我不会像这样直接操纵#title的样式， #title将CSS与我们在.projects使用的类结合使用：