Question

当鼠标悬停在链接上时，我想为每个链接显示一个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>

Answer 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

Answer 2

你不能直到CSS4（或者有些人可能会开始称之为CSS3.1，因为（还没有）正式引用CSS4）已经“准备好”并且在浏览器中得到支持。没什么好说的。您需要使用JavaScript来实现此目的。

Answer 3

CSS中没有父选择器。

如果链接是#shadowedlinks的兄弟并且在它们之后，你可以使它工作。所以你可以像男性那样：

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

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

当hover另一个时，CSS显示隐藏的元素

3 个答案: