CSS悬停+ div不工作

Question

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

我试图为每个创建一个div，只是制作一个div，但由于元素被放置在时间轴内，我无法获得正确的页面格式。

在一个侧面说明，一旦这是固定的，有什么办法悬停只适用于图像，而不是任何相关的边距/填充？

下面是我得到了什么：

#job1 
 

 
{ 
 
\t display: none; 
 
} 
 

 
#job2 
 

 
{ 
 
\t display: none; 
 
} 
 

 
#att1:hover + #job1 
 

 
{ 
 
\t display: block; 
 
} 
 

 
#att2:hover + #job2 
 

 
{ 
 
\t display: block; 
 
}

<div class = "timeline"> 
 
\t \t 
 
\t <div id = "line"></div> 
 
\t \t \t 
 
\t <a id = "att1" href = "#"><img id = "scintern" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a> 
 
\t <a id = "att2" href = "#"><img id = "scdss" src = "https://www.santandercareers.com/content/themes/scusa-careers/assets/images/bemore.png" alt = "Santander Logo"></a> 
 
\t \t \t 
 
</div> 
 
\t \t 
 
<div class = "textbox" id = "job1"> 
 
\t \t \t 
 
\t <p class = "header">Santander Consumer USA, Inc.</p> 
 
\t <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> 
 
\t \t 
 
</div> 
 
\t \t 
 
<div class = "textbox" id = "job2"> 
 
\t \t 
 
\t <p class = "header">Santander Consumer USA, Inc. 2</p> 
 
\t <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> 
 
\t \t 
 
</div>

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 eventes，然后相应地处理文本。以下是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>