Question

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

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

在旁注中，一旦修复，是否有任何方法可以将悬停仅应用于图像，而不是任何相关的边距/填充？

以下是我所拥有的：

＆＃13;

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

＆＃13;

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

＆＃13;

PS。我保证我现在已经研究了大约4个小时。但是，也许我没有找到合适的地方，因为这对我来说太新了。

Answer 1

如果你改变一下html就可以完成。将.textbox 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 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>

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

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

CSS悬停+ div无法正常工作

2 个答案: