Question

我需要更改不是目标元素的直接元素的文本颜色。

这是另一个父div的孩子。如何通过css定位外部元素？

在演示中，您可以看到another text' color changes on mouse over of div1 span , likewise I want to change the color of div2 span

在我的代码中，我如何定位div2的跨度（而不是div2因为div 2中会有很多其他元素）？

PS - 需要从另一个父元素的子元素中定位另一个父元素的子元素。

HTML

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
  Another text
  </div>
</div>

<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>

Demo

Answer 1

如果您只想使用CSS，则必须将：hover分配给.div1，以便在悬停中选择.div2（因为您无法在CSS中选择父级）：

.div1:hover .another_txt {
    color: red;
 }
  
.div1:hover + .div2 span{
    color: red;
 }

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
  Another text
  </div>
</div>

<div class="div2">
<span>How to change this text color on div1 span hover?</span>
</div>

Answer 2

您可以使用JavaScript / JQuery。据我所知，你无法在CSS中实现它。

<强> HTML：

<div class="div1">
  <span id="hover">hover me</span>
  <div class="another_txt">
  Another text
  </div>
</div>

<div class="div2">
<span id="target">How to change this text color on div1 span hover?</span>
</div>

<强> JS：

$(document).ready(function() {
    $("#hover").hover(function() {
       $("#target").css("color", "red");
  })
})

以下是现场演示：https://jsfiddle.net/vf8ab8yh/1/

Answer 3

您可以做的最好的事情是将span包装在另一个包装器中（您也可以不包装它，您的选择）然后使用~选择器。

~的使用是选择第一个元素（.div2）（.newDiv） >。您可以从here了解更多信息。

element1~element2选择器匹配以element1为前缀的element2的出现次数。

两个元素必须具有相同的父元素，但元素2不必紧跟元素1。

.newDiv:hover~.div2>span {
  color: pink;
}

<div class="newDiv"><span>hover me</span></div>
<div class="div1">
  <div class="another_txt">
    Another text
  </div>
</div>

<div class="div2">
  <span>How to change this text color on div1 span hover?</span>
</div>

Answer 4

要在div1悬停.div1:hover+.div2 span{ color: pink; }时定位范围，请使用以下CSS选择器：

.div1:hover+.div2 span{
  color: pink;
}

演示：

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
    Another text
  </div>
</div>
<div class="div2">
  <span>How to change this text color on div1 span hover?</span>
  <div>Don't change this</div>
</div>

body {
  width: 800px;
  margin: auto;
  margin-top: 100px;
}

header {
  background-color: #EC7063;
  border-radius: 10px;
  text-align: center;
}

main {
  background-color: #76D7C4;
  border-radius: 10px;
  padding: 20px;
}

h1 {
  color: #21618C;
}

#cat {
  border-radius: 10px;
  background-color: #27AE60;
  padding: 10px;
  margin-right: 20px;
  float: left;
  height: 200px;
}

h2 {
  color: #21618C;
}

#prod {
  border-radius: 10px;
  background-color: #AF7AC5;
  height: 200px;
  padding: 10px;
  overflow: hidden;
}

table {
  display: block;
  overflow: auto;
  height: 100px;
  table-layout: fixed;
  width: 100%;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  text-align: center;
}

footer {
  background-color: #EC7063;
  border-radius: 10px;
  text-align: center;
  font-size: 25px;
  color: #F8F9F9;
  clear: both;
}

Answer 5

element1~element2选择器匹配以element1为前缀的element2的出现次数。

两个元素必须具有相同的父元素，但元素2不必紧跟元素1。

css selectors

<div class="div1">
  <span>hover me</span>
  <div class="another_txt">
    Another text
  </div>
</div>
<div class="div2">
  <span>How to change this text color on div1 span hover?</span>
</div>

{{1}}

将鼠标div的文本颜色改为一只鼠标

5 个答案: