CSS display hidden element when hover another

Question

I wanted to show a div element for each link when the mouse becomes over the link. The example I have is 4 links and 4 shadow titles .. these shadow titles should be hidden and only should appear when mouse comes over the designated link.

Here the codes I have right now:

<!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>

Colin Bacon · Accepted Answer · 2013-04-04T16:30:06.320

By changing your markup slightly you could do something like this.

Example

<!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>

I would argue that because the shadow links are positioned absolutely, there is no need for them to have a containing div, so I have removed it.

This allows me to use ~ sibling selector on hover.

JsFiddle

Nice one Colin .. Can't we position these shadows behind the links using position and z-index! — mimidov, Apr 04 '13 at 15:36

score 2 · Answer 2 · answered Apr 04 '13 at 14:47

2

You can't until CSS4 (or some might start calling it CSS3.1, as there is no official reference to CSS4 for (yet)) is "ready" and supported in browsers. Not much more to say. You need to use JavaScript to achieve this.

answered Apr 04 '13 at 14:47

1

I think there is nothing called CSS4. Even not CSS3 since there are no more CSS versions. Last one was CSS2.1, and now it works by module levels. The *selector module* are now in [level 3](http://www.w3.org/TR/css3-selectors). – pzin Apr 04 '13 at 14:55
Yes yes yes, I know :P. It's just like calling stuff Web 2.0 back in the days. Let's call it *stuff after CSS 2.1* or *draft functionality* ;) – Apr 04 '13 at 14:56
It seems there is a workaround without having to use javascript .. Check (http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) and also Colin's solution which worked just fine. – mimidov Apr 04 '13 at 15:38
@mimidov Isn't it essential that the affected class it then a child of the hovered parent tag? It probably wouldn't work on a class outside the hovered parent. I hope you can correct me wrong; it would be a nice feature/hack. – Apr 04 '13 at 15:44

score 2 · Answer 3 · answered Apr 04 '13 at 14:52

There are no parent selectors in CSS yet.

You could make it work, if the links are brothers of #shadowedlinks and comes after them. So you could male something like:

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

But I think JavaScript would be a better solution.

CSS display hidden element when hover another

3 Answers3

Linked