当我将鼠标悬停在图片上时，为什么不显示文本/块？我有下面提供的html / css。当我将鼠标悬停在图像上时，我真的不知道它为什么不显示。 （我只是试图将鼠标悬停在显示的四个图像中的第一张图片上）
这是我尝试将鼠标悬停在图片上并显示文字的特定相关CSS代码段：
/* HOVER STYLES */
div#pop-up1, #pop-up2, #pop-up3, #pop-up4 {
visibility: hidden;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 3px solid #196CE8; /*#f7923a;*/
font-size: 90%;
border-radius: 25px;
}
trigger1:hover #pop-up1 {
display: block;
opacity: 1;
}
这是特定的html片段：
<section id="promo_area">
<article>
<div class="inner">
<div class="picDiv"><span id="trigger1"><img alt="paris" src="Paris.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up1">
<h3>Paris</h3>
<p>MUN in Paris 2013.</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger2"><img alt="Russia" src="russia.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up2">
<h3>Russia</h3>
<p>MUN in Russia 2014</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger3"><img alt="Dubai" src="dubai.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up3">
<h3>Dubai</h3>
<p>MUN in Dubai 2015</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger4"><img alt="Japan" src="japan.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up4">
<h3>Japan</h3>
<p>MUN in Japan 2016</p>
</div>
</article>
</section><!--end promo_area-->
这是完整的代码：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Birdwatching</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
html
{ height: 100%;
}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2 url(ff.jpg) repeat;
color: #000;
width: 97%;
min-width: 800px;
margin:0 auto;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #7E2451;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 175% 'century gothic', arial, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;}
nav ul {
background: url(transparent.png) ;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display:inline-block;
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover {
background: #bada55;
left:auto;
right:0;
margin-right:-10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
main
{ width: 854px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 24px 20px 20px;
background: transparent url(transparent_light.png) repeat;}
#first_half article
{ text-align: left;
float: left;
width: 595px;
/width:60%;
height: 50pc;
padding: 0;}
#first_half article ul
{ margin: 2px 0 22px 0px;}
#first_half article ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
#first_half aside
{ float: right;
width: 210px;
/width: 25%;
/padding: 0 15px 20px 15px;
padding: 0;
height: 50pc;
}
#first_half aside ul
{ width: 198px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
#first_half aside li
{ list-style: none;
padding: 0 0 7px 0; }
#first_half aside li a, #first_half .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
#first_half aside li a.selected
{ color: #7E2451;
text-decoration: none;}
#promo_area article {
float:left;
width: 25%;
/height: 50pc;
padding:10px 0;
border-top: solid #f7be84;
/background:#fff;
text-align: center;
}
#promo_area article .inner {
margin:0 10px;
padding:10px;
background:#e5e8ed;
/border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
text-align: center;
}
#promo_area article p {
font-family:'Open Sans Condensed';
font-weight:300;
font-size:1em;
line-height:1.5em;
color:#616161;
}
/* HOVER STYLES */
div#pop-up1, #pop-up2, #pop-up3, #pop-up4 {
visibility: hidden;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 3px solid #196CE8; /*#f7923a;*/
font-size: 90%;
border-radius: 25px;
}
trigger1:hover #pop-up1 {
display: block;
opacity: 1;
}
</style>
</head>
<body>
<header>
<h1>Model United Nations Deforestation Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#">Get started</a>
<div class="dropdown-content">
<a href="#">Preparation</a>
<a href="#">D-Day</a>
<a href="#">Useful Resources</a>
</div>
</li>
<li class="dropdown"><a href="#">Gallery</a>
<div class="dropdown-content">
<a href="#">MUN 2015</a>
<a href="#">MUN 2016</a>
<a href="#">MUN 2017</a>
</div>
</li>
<li class="dropdown"><a href="#">Contact Us</a>
<div class="dropdown-content">
<a href="#">Ask A Question</a>
<a href="#">Contact Information</a>
<a href="#">Map</a>
</div>
</li>
<li class="dropdown"><a href="#">Forum</a>
<div class="dropdown-content">
<a href="#">About</a>
<a href="#">Sign-Up</a>
<a href="#">Community</a>
</div>
</li>
</ul>
</nav>
</header>
<main>
<section id = "first_half">
<article>
<h2>Welcome</h2>
<p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allowfullscreen sandbox></iframe>
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
</article>
<aside>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">Validate the payment</button> </p>
</form>
</aside>
</section>
<section id="promo_area">
<article>
<div class="inner">
<div class="picDiv"><span id="trigger1"><img alt="paris" src="Paris.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up1">
<h3>Paris</h3>
<p>MUN in Paris 2013.</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger2"><img alt="Russia" src="russia.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up2">
<h3>Russia</h3>
<p>MUN in Russia 2014</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger3"><img alt="Dubai" src="dubai.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up3">
<h3>Dubai</h3>
<p>MUN in Dubai 2015</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger4"><img alt="Japan" src="japan.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up4">
<h3>Japan</h3>
<p>MUN in Japan 2016</p>
</div>
</article>
</section><!--end promo_area-->
</main>
</body>
</html>
答案 0 :(得分：0)
首先，用于显示它的css代码不正确trigger1:hover #pop-up1，根据您的要求，我在底部放置了一个简单的CSS，其中+用于相邻的兄弟组合< / p>
#promo_area article .inner:hover + div {
display: block;
visibility: visible;
}
html
{ height: 100%;
}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2 url(ff.jpg) repeat;
color: #000;
width: 97%;
min-width: 800px;
margin:0 auto;
}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #7E2451;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
h2
{ font: normal 175% 'century gothic', arial, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;}
h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;}
nav ul {
background: url(transparent.png) ;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display:inline-block;
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover {
background: #bada55;
left:auto;
right:0;
margin-right:-10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
main
{ width: 854px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 0 24px 20px 20px;
background: transparent url(transparent_light.png) repeat;}
#first_half article
{ text-align: left;
float: left;
width: 595px;
/width:60%;
height: 50pc;
padding: 0;}
#first_half article ul
{ margin: 2px 0 22px 0px;}
#first_half article ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}
#first_half aside
{ float: right;
width: 210px;
/width: 25%;
/padding: 0 15px 20px 15px;
padding: 0;
height: 50pc;
}
#first_half aside ul
{ width: 198px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}
#first_half aside li
{ list-style: none;
padding: 0 0 7px 0; }
#first_half aside li a, #first_half .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}
#first_half aside li a.selected
{ color: #7E2451;
text-decoration: none;}
#promo_area article {
float:left;
width: 25%;
/height: 50pc;
padding:10px 0;
border-top: solid #f7be84;
/background:#fff;
text-align: center;
}
#promo_area article .inner {
margin:0 10px;
padding:10px;
background:#e5e8ed;
/border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
text-align: center;
}
#promo_area article p {
font-family:'Open Sans Condensed';
font-weight:300;
font-size:1em;
line-height:1.5em;
color:#616161;
}
/* HOVER STYLES */
div#pop-up1, #pop-up2, #pop-up3, #pop-up4 {
visibility: hidden;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 3px solid #196CE8; /*#f7923a;*/
font-size: 90%;
border-radius: 25px;
}
trigger1:hover #pop-up1 {
display: block;
opacity: 1;
}
#promo_area article .inner:hover + div {
display: block;
visibility: visible;
}<header>
<h1>Model United Nations Deforestation Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#">Get started</a>
<div class="dropdown-content">
<a href="#">Preparation</a>
<a href="#">D-Day</a>
<a href="#">Useful Resources</a>
</div>
</li>
<li class="dropdown"><a href="#">Gallery</a>
<div class="dropdown-content">
<a href="#">MUN 2015</a>
<a href="#">MUN 2016</a>
<a href="#">MUN 2017</a>
</div>
</li>
<li class="dropdown"><a href="#">Contact Us</a>
<div class="dropdown-content">
<a href="#">Ask A Question</a>
<a href="#">Contact Information</a>
<a href="#">Map</a>
</div>
</li>
<li class="dropdown"><a href="#">Forum</a>
<div class="dropdown-content">
<a href="#">About</a>
<a href="#">Sign-Up</a>
<a href="#">Community</a>
</div>
</li>
</ul>
</nav>
</header>
<main>
<section id = "first_half">
<article>
<h2>Welcome</h2>
<p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>
<p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" frameborder="0" allowfullscreen sandbox></iframe>
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
</article>
<aside>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<p> <button type="submit">Validate the payment</button> </p>
</form>
</aside>
</section>
<section id="promo_area">
<article>
<div class="inner">
<div class="picDiv"><span id="trigger1"><img alt="paris" src="Paris.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up1">
<h3>Paris</h3>
<p>MUN in Paris 2013.</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger2"><img alt="Russia" src="russia.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up2">
<h3>Russia</h3>
<p>MUN in Russia 2014</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger3"><img alt="Dubai" src="dubai.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up3">
<h3>Dubai</h3>
<p>MUN in Dubai 2015</p>
</div>
</article>
<article>
<div class="inner">
<div class="picDiv"><span id="trigger4"><img alt="Japan" src="japan.jpg" width="100" height="100" /></span></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up4">
<h3>Japan</h3>
<p>MUN in Japan 2016</p>
</div>
</article>
</section><!--end promo_area-->
</main>