html - CSS 悬停 + div 不起作用

Question

所以，免责声明，我已经学习 HTML 和 CSS 大约 2 天了。我认为将我的简历转换成网站会是一个很酷的元素。但是，我在设计体验页面时遇到了一些障碍。理论上，我想将鼠标悬停在 an 上，然后显示 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 就可以完成。将 .textbox div 放在 anchor 之后。然后使用 ~ 定位 sibling 。 + 用于直接兄弟(如果紧随其后)。

#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>