当鼠标悬停在缩略图上时，尝试使其具有背景色和文本

Question

我试图将缩略图图片悬停时更改为带有文本的纯背景色。

 function info(){ document.getElementById('thumbnail_1').style.backgroundColor='red'; } 

 <article id="thumbnail_1" onmouseover="info();"> <a href=""><img src="http://placehold.it/200x100/" alt="taffies website thumbnail"></a> </article> 

完整的例子

 function info(){ document.getElementById('thumbnail_1').style.backgroundColor='red'; } 

 *{ margin:0; padding:0; list-style-type:none; } header,nav,section,article,aside,footer{ display:block; } .container{ width:960px; margin:0 auto; } .main_title{ float:left; padding:20px; font-size:35px; font-family: 'Source Sans Pro', sans-serif; } .main_title a{ text-decoration:none; color:#ffffff; } .main_header{ background-color:#000000; color:#ffffff; width:100%; height:80px; } .header_wrapper{ width:960px; margin:0 auto; } .main_nav{ float:left; margin-left:400px; } .main_nav ul li{ float:left; padding:35px 10px; } .main_nav ul li a{ text-decoration:none; color:#ffffff; font-family:myriad pro; } .main_nav a:hover{ color:#ccc; } .main_content{ width:960px; height:800px; } .main_content article{ width:260px; height:200px; margin:30px; float:left; } .about_content{ width:960px; height:800px; } .about_content article{ margin:30px; width:500px; } .about_title{ font-size:30px; margin-bottom:40px; font-family:myriad pro; } .about_name{ font-size:20px; font-weight:bold; font-family:myriad pro; } .contact_content{ width:960px; height:800px; } .contact_content article{ margin:30px; width:500px; } .contact_title{ font-size:30px; margin-bottom:40px; font-family:myriad pro; } .about_webdev{ font-family:arial; } .about_email{ font-family:arial; } footer{ width:100%; background-color:#000000; color:#ffffff; height:80px; } footer ul li{ float:left; padding:30px 10px; } footer ul li a{ text-decoration:none; color:#ffffff; font-family:myriad pro; } footer a:hover{ color:#ccc; } .footer_wrapper{ width:240px; margin:0 auto; } span{ font-weight:bold; } 

 <header class="main_header"> <div class="header_wrapper"> <p class="main_title"><a href="index.html">title</a></p> <nav class="main_nav"> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> </header> <!-- end of header --> <div class="container"> <section class="main_content"> <article id="thumbnail_1" onmouseover="info();"> <a href=""><img src="data:image/jpeg;base64,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" alt="taffies website thumbnail"></a> </article> <article> <a href=""><img src="images/fitstyle-thumbnail.png" alt="fitstyle website thumbnail"></a> </article> <article id="thumbnail_1" onmouseover="info();"> vbv </article> </section> <!-- end of section --> </div> <!-- end of container --> <footer> <div class="footer_wrapper"> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </footer> <!-- end of footer --> 

Answer 1

您应该真正使用CSS：hover选择器。 例如：

#thumbnail_1 p {
  display: none;
}
#thumbnail_1:hover {
  background-color: red;
}
#thumbnail_1:hover p {
  display: block;
}
#thumbnail_1:hover img {
  visibility: hidden;
}

您根本不需要使用JS