CODEWITHSUNDEEP
htmlcss
Sabari
Sabari

Reputation: 51

Why hover not working when I include span

.dropdown span:hover .dropdown_content{ display:block } is not working.

What is the reason???

  *{ padding:0; margin:0 }
  
.dropdown_content{ display:none; }
.dropdown span:hover .dropdown_content{ display:block }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drop down menu</title>
    <link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="dropdown">
     <span>Mouse over me</span>
        <div class="dropdown_content">
            <p>Hello world</p>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 141

Answers (2)

Justinas
Justinas

Reputation: 43507

.dropdown span:hover .dropdown_content{ display:block } is not working, because span does not contain .dropdown_content element. They are siblings.

Use + to select siblings

*{ padding:0; margin:0 }
  
.dropdown_content{ display:none; }
.dropdown span:hover + .dropdown_content{ display:block }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drop down menu</title>
    <link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="dropdown">
     <span>Mouse over me</span>
        <div class="dropdown_content">
            <p>Hello world</p>
        </div>
    </div>
</body>
</html>

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

When targeting span than you need to target the next + adjacent sibling selector like:

.dropdown span:hover + .dropdown_content{ display:block }

https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

Upvotes: 2

Related Questions