1

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

3 回答 3

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

#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，所以我删除了它。

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

提琴手

于 2013-04-04T15:11:29.470 回答
2

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

于 2013-04-04T14:47:37.977 回答
2

CSS 中还没有父选择器。

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

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

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

于 2013-04-04T14:52:15.280 回答