CSS在悬停另一个时显示隐藏元素答案

【问题标题】：CSS display hidden element when hover anotherCSS在悬停另一个时显示隐藏元素
【发布时间】：2013-03-26 17:19:38
【问题描述】：

当鼠标移到链接上时，我想为每个链接显示一个 div 元素。我的例子是 4 个链接和 4 个阴影标题.. 这些阴影标题应该被隐藏，只有在鼠标经过指定链接时才会出现。

这里是我现在拥有的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>

<style type="text/css">

body {
    background:#1d2733;
    color:#fff;
    margin:0;
}

#col1 {
    width:300px;
    height:129px;
    float:left; 
    padding-bottom:20px;
}
#col2 {
    width:600px;
    float:right;
    padding-top:150px;
    border-bottom: 2px solid white;
}

#shadowedlinks {
    width:600px;
    float:right;
    position:absolute;
    margin-top:-30px;
    top:0;
}

div.lnk{
    position:absolute;
    font-size:180px;
    text-align:center;
    font-weight:bold;
    color:#444;
}

#links {
    width:600px;
    float:right;
    position:absolute;
    top:0;
    padding-top:100px;
}

#links h1 {
    float:left;
    font-size:30px;
    text-align:center;
    padding:0 20px; 
}
#links h1 a {
    color:#fff;
    text-decoration:none;
}
#links h1 a:hover{
    color:#FF9;
}

</style>
</head>

<body>
<div id="col1">
<h1><a href="index.php"><img src="imgs/logo.png" class="logo" border="0" width="250" height="129" /></a></h1>
</div>
<div id="col2">
    <div id="shadowedlinks">
        <div class="lnk" id="lnkHome">HOME</div>
        <div class="lnk" id="lnk1">LINK1</div>
        <div class="lnk" id="lnk2">LINK2</div>
        <div class="lnk" id="lnk3">LINK3</div>
    </div>
    <div id="links">
        <h1><a href="index.php">HOME</a></h1>
        <h1><a href="link1.php">LINK1</a></h1>
        <h1><a href="link2.php">LINK2</a></h1>
        <h1><a href="link3.php">LINK3</a></h1>
    </div>

</div>


</body>
</html>

【问题讨论】：

标签： css

【解决方案1】：

通过稍微改变你的标记，你可以做这样的事情。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>

<style type="text/css">

body {
    background:#1d2733;
    color:#fff;
    margin:0;
}

#col1 {
    width:300px;
    height:129px;
    float:left; 
    padding-bottom:20px;
}
#col2 {
    width:600px;
    float:right;
    padding-top:150px;
    border-bottom: 2px solid white;
}

#shadowedlinks {
    width:600px;
    float:right;
    position:absolute;
    margin-top:-30px;
    top:0;
}

#shadowedlinks div
{
    display: none;
}

.lnk{
    position:absolute;
    font-size:180px;
    text-align:center;
    font-weight:bold;
    color:#444;
    top: -15px;
    z-index: -1;
}

#links {
    width:600px;
    float:right;
    position:absolute;
    top:0;
    padding-top:100px;
}

#links h1 {
    float:left;
    font-size:30px;
    text-align:center;
    padding:0 20px; 
}
#links a {
    color:#fff;
    text-decoration:none;
}
#links a:hover{
    color:#FF9;
}

#links .lnk
{
    display: none;
}

.link-home:hover ~ #lnkHome,
.link-1:hover ~ #lnk1,
.link-2:hover ~ #lnk2,
.link-3:hover ~ #lnk3
{
    display: block;
}

</style>
</head>

<body>
<div id="col1">
<h1><a href="index.php"><img src="imgs/logo.png" class="logo" border="0" width="250" height="129" /></a></h1>
</div>
<div id="col2">
<div id="links">
    <a class="link-home" href="index.php"><h1>HOME</h1></a>
    <a class="link-1" href="link1.php"><h1>LINK1</h1></a>
    <a class="link-2" href="link2.php"><h1>LINK2</h1></a>
    <a class="link-3" href="link3.php"><h1>LINK3</h1></a>

    <div class="lnk" id="lnkHome">HOME</div>
    <div class="lnk" id="lnk1">LINK1</div>
    <div class="lnk" id="lnk2">LINK2</div>
    <div class="lnk" id="lnk3">LINK3</div>
</div>

我认为因为阴影链接是绝对定位的，所以它们不需要包含 div，所以我将其删除。

这允许我在悬停时使用~ 兄弟选择器。

JsFiddle

【讨论】：

不错的 Colin .. 我们不能使用位置和 z-index 将这些阴影定位在链接后面吗！

【解决方案2】：

直到 CSS4（或者有些人可能会开始称它为 CSS3.1，因为（还）没有官方引用 CSS4）“准备好”并在浏览器中支持之前，您才能做到这一点。不多说了。您需要使用 JavaScript 来实现这一点。

【讨论】：

我认为没有什么叫做 CSS4。甚至没有 CSS3，因为没有更多的 CSS 版本。最后一个是 CSS2.1，现在它按模块级别工作。 选择器模块现在位于level 3。
是的，是的，我知道：P。这就像在过去调用 Web 2.0 一样。我们称它为 CSS 2.1 之后的东西 或 draft features ;)
似乎有一种解决方法，无需使用 javascript .. 检查 (stackoverflow.com/questions/1462360/…) 以及 Colin 的解决方案，效果很好。
@mimidov 受影响的类不是悬停的父标签的子标签吗？它可能不适用于悬停的父级之外的类。我希望你能纠正我的错误；这将是一个不错的功能/黑客。

【解决方案3】：

CSS 中还没有父选择器。

如果链接是#shadowedlinks 的兄弟并且紧随其后，您可以使其工作。所以你可以像男性一样：

a#link1:hover + #shadowedlinks #shadowed_link1 {
  display: block;
}

但我认为 JavaScript 会是更好的解决方案。

【讨论】：