CSS 悬停 + div 不起作用

Question

所以，免责声明，我学习HTML和CSS大约2天。我认为将我的简历转换为网站将是一个很酷的项目。但是，我在设计体验页面时遇到了一些障碍。从理论上讲，我想将鼠标悬停在一个上面，然后显示div中包含的一些文本。如果我只使用 ：hover 而不是 #att1：hover，悬停部分就可以工作，但如果我这样做，我就不能有多个对象。希望这是有道理的。

我尝试为每个元素创建一个div 并简单地制作一个div，但由于元素被放置在时间轴内，我无法正确设置页面上的格式。

附带说明一下，一旦修复了这个问题，有没有办法让悬停仅应用于图像，而不应用于任何关联的边距/填充？

这是我得到的：

#job1
{
	display: none;
}
#job2
{
	display: none;
}
#att1:hover + #job1
{
	display: block;
}
#att2:hover + #job2
{
	display: block;
}

<div class = "timeline">
		
	<div id = "line"></div>
			
	<a id = "att1" href = "#"><img id = "scintern" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a>
	<a id = "att2" href = "#"><img id = "scdss" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a>
			
</div>
		
<div class = "textbox" id = "job1">
			
	<p class = "header">Santander Consumer USA, Inc.</p>
	<p class = "body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		
</div>
		
<div class = "textbox" id = "job2">
		
	<p class = "header">Santander Consumer USA, Inc. 2</p>
	<p class = "body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		
</div>

附言。我保证我已经研究了大约 4 个小时。但是，也许我没有在正确的地方寻找，因为这对我来说太新了。

Answer 1

如果你稍微

改变一下html，就可以完成。将.textboxdiv 放在锚之后。然后使用~定位兄弟姐妹。+适用于直系兄弟姐妹（如果紧随其后）。

#job1 {
  display: none;
}
#job2 {
  display: none;
}
#att1:hover ~ #job1 {
  display: block;
}
#att2:hover ~ #job2 {
  display: block;
}

<div class="timeline">
  <div id="line"></div>
  <a id="att1" href="#">
    <img id="scintern" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt="Santander Logo">
  </a>
  <a id="att2" href="#">
    <img id="scdss" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt="Santander Logo">
  </a>
  <div class="textbox" id="job1">
    <p class="header">Santander Consumer USA, Inc.</p>
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
  <div class="textbox" id="job2">
    <p class="header">Santander Consumer USA, Inc. 2</p>
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
</div>

Answer 2

您

+目前使用的CSS选择器称为adjacent sibling selector。它将选择紧跟在元素之后的任何元素。这不符合您的需求。你最好用一点 JavaScript 来做到这一点。您要做的是检查图像上的mouseenter和mouseleave事件，然后相应地处理文本。下面是jQuery的实现，jQuery是一个易于安装的JavaScript库。

若要仅检测将鼠标悬停在图像上，请不要对图像应用边距，而仅对周围的链接进行填充。

要在页面中安装 jQuery，只需在脑海中输入以下标签：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>

JavaScript 是使用 jQuery 标签后面的另一个脚本标签插入的，如下所示：

<script>
    Your code here...
</script>

这是片段：

$("#scintern").mouseover(function() {
    $("#job1").show();
});
$("#scintern").mouseleave(function() {
    $("#job1").hide();
});
$("#scdss").mouseover(function() {
    $("#job2").show();
});
$("#scdss").mouseleave(function() {
    $("#job2").hide();
});

#att1, #att2 {
    text-decoration: none;
}
#job1 {
    display: none;
}
#job2 {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline">
    <div id="line"></div>
    <a href="#" id="att1">
        <img alt="Santander Logo" id="scintern" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png">
    </a>
    <a href="#" id="att2">
        <img alt="Santander Logo" id="scdss" src="https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png">
    </a>
</div>
<div class="textbox" id="job1">
    <p class="header">Santander Consumer USA, Inc.</p>
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="textbox" id="job2">
    <p class="header">Santander Consumer USA, Inc. 2</p>
    <p class="body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>