CSS 悬停 + div 无效
CSS hover + div not working
因此,免责声明,我学习 HTML 和 CSS 大约需要 2 天时间。我认为将我的简历转换成网站会是一个很酷的项目。但是,我 运行 在设计体验页面时遇到了一些障碍。理论上,我想将鼠标悬停在 an 上,然后显示 div 中包含的一些文本。如果我只使用 :hover 而不是 #att1:hover,悬停部分就可以工作,但如果我这样做,我就不能有多个对象。希望这是有道理的。
我尝试为每个创建一个 div 并简单地制作一个 div,但是由于元素被放置在时间轴内,我无法在页面上获得正确的格式.
附带说明一下,一旦这个问题得到解决,有没有办法让悬停只应用于图像,而不应用于任何关联的 margin/padding?
这是我得到的:
#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>
ps。我保证我现在已经研究了大约 4 个小时。但是,也许ps我没有找对地方,因为这对我来说太陌生了。
稍微更改 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>
CSS select 或者你现在使用的 +
被称为 adjacent sibling selector
。它将 select 任何元素紧跟在该元素之后。那不适合你的需要。你最好用一点 JavaScript 来做这件事。您要做的是检查图像上的 mouseenter
和 mouseleave
事件,然后相应地处理文本。下面是 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>