Question

我正在尝试设置一些内容，当有人在.twitter-underline-1上方悬停时，会触发该类的:hover和:hover ID的#twitter-1

反之亦然

如果有人在#twitter-1上方悬停，则会触发该{id}的:hover和:hover类的.twitter-underline-1

我尝试了一些推荐的解决方案，其他人提出类似问题，但没有完全奏效。有人能指出我正确的方向吗？

.twitter-underline-1 {
  border-bottom: 1px dotted #E0E0E0;
}
.twitter-underline-1:hover {
  border-bottom: 1px solid #4099FF;
}
#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}
#twitter-1:hover {
  color: #4099FF;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<span class="twitter-underline-1">Blah blah text</span>

<div class="twitter">
  <span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
</div>

Answer 1

演示 - http://jsfiddle.net/3855n719/

$('#twitter-1').hover(
  function() {
    $('.twitter-underline-1').addClass('hover');
  },
  function() {
    $('.twitter-underline-1').removeClass('hover');
  }
);

Answer 2

在不更改html结构的情况下无法完成，因为无法在css中选择前一个元素。

我认为你有两个选择：

用.twitter-container围绕它并在那里添加:hover课程。如果您在.twitter-underline和#twitter-1之间没有任何其他内容，这可能只是一种选择，因为将鼠标悬停在这些内容上也会添加样式。
移动.twitter-underline下面的html中的#twitter-1元素，选择它兄弟选择器，如+或~，并使用position: absolute将其放回适当位置。

方法1的示例

＆＃13;

.twitter-underline-1 {
  border-bottom: 1px dotted #E0E0E0;
}

#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}

.twitter-container:hover .twitter-underline-1 {
  border-bottom: 1px solid #4099FF;  
}

.twitter-container:hover #twitter-1 {
  color: #4099FF;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="twitter-container">
  <span class="twitter-underline-1">Blah blah text</span>

  <div class="twitter">
    <span title="Click to Tweet"><i id="twitter-1" class="fa fa-twitter"></i></span>
  </div>
</div>

＆＃13;

方法2的示例

＆＃13;

.twitter-container {
  position: relative;
  padding-top: 1em;
}
.twitter-underline-1 {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px dotted #E0E0E0;
}
#twitter-1 {
  padding-top: 402px;
  font-size: 40px;
  color: #E0E0E0;
  margin-left: 45px;
}
#twitter-1:hover {
  color: #4099FF;
}
#twitter-1:hover + .twitter-underline-1 {
  border-bottom: 1px solid #4099FF;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div class="twitter-container">
  <div class="twitter">
    <span title="Click to Tweet">
      <i id="twitter-1" class="fa fa-twitter"></i>
      <span class="twitter-underline-1">Blah blah text</span>
    </span>
  </div>
</div>

＆＃13;

鼠标悬停触发器悬停在自身和另一个div上

2 个答案: