我有一个问题，当我将鼠标悬停在图像上时会显示正确的效果，但当我将鼠标悬停在图像内部的文本上时，图像本身会失去效果。
演示：https://skullscream.github.io/tributepage/使用三张图片转到第二部分。
图片不会显示在代码段中，因为它们是本地存储的，但如有必要，我可以上传它们并更改链接。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
background-color: white;
font-size: 16px;
}
/* Section 1 */
.heading-pictures {
margin-top: 2%;
}
#top-picture {
margin-bottom: -4%;
}
.paragraph {
background-color: #95a5a6;
padding: 2%;
color: white;
text-align: justify;
}
.title {
position: absolute;
color: #6c7878;
}
.hd1 {
font-size: 5.25em;
}
.hd1,
.hd2 {
text-align: center;
padding-top: 15%;
line-height: 1;
}
.hd2 {
padding-top: 5%;
border-top: 1px solid #6c7878;
}
.section1 {
position: relative;
}
div.paragraph-quote {
margin-bottom: 4%;
background-color: rgba(0, 0, 0, 0)
}
hr.style-one {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
/* Section 2 */
.inventions {
width: 100%;
-webkit-filter: brightness(100%);
transition: all .3s ease-in, all .3s ease-out;
}
.images {
margin-top: 2%;
}
.section2 p {
text-align: center;
font-size: 2.5em;
color: #6c7878;
margin-top: 2%;
}
.section2 div {
margin-bottom: 2%;
}
.tesla-patents p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}
.tesla-patents p span a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
.tesla-patents p span a:hover,
.tesla-patents p span a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
/*Text on hover*/
.inventions:hover{
-webkit-filter: brightness(40%);
}
div.images span {
background-color: rgba(0,0,0,0);
padding: 0;
margin: 0 auto;
}
.img-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
-webkit-transition: visibility opacity .3s ease-in, visibility opacity .3s ease-out;
}
.img-wrap:hover .img-description {
visibility: visible;
opacity: 1;
font-size: 3em;
text-align: center;
padding: 0;
margin: 25%;
color: white;
}
/* Section 3 */
.bio-heading {
font-size: 2.5em;
color: #6c7878;
padding: 0;
text-align: center;
margin-top: 1%;
margin-bottom: 3%;
}
#detailed-bio p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}
#detailed-bio p a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
#detailed-bio p a:hover,
#detailed-bio p a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
footer {
font-size: .7em;
margin-bottom: 1%;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link href="tribute.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<title>Nikola Tesla, Engineer and Inventor</title>
</head>
<body>
<div class="container-fluid">
<!-- Section 1 -->
<div class="row">
<div class="section1 col-xs-12">
<div class="row">
<div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
<p class="hd1">Nikola Tesla</p>
<p class="hd2">Inventor and Engineer</p>
</div>
<div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
<img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
</div>
<div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
<p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." - Nikola Tesla</p>
</div>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 2 -->
<div class="row">
<div class="section2 col-xs-12">
<div class="row">
<div class="col-xs-12">
<p>What is Nikola Tesla known for?</p>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="images/hose-coupling-power-cable-strange-black-64025.jpeg" alt="PROJECT">
<span class="img-description">AC</span>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="images/pexels-photo-109998.jpeg">
<span class="img-description">NEONS</span>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="images/sound-speaker-radio-microphone.jpg">
<span class="img-description">RADIO</span>
</div>
<div class="tesla-patents col-xs-12">
<p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span></p>
</div>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 3 -->
<div class="row">
<div class="bio-section col-xs-12">
<p class="bio-heading">Biography</p>
<div id="detailed-bio">
<p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span></p>
</div>
</div>
</div>
<hr class="style-one">
<footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>
</body>
</html>
答案 0 :(得分：1)
将:hover效果写入父div而不是img本身，因为当您将鼠标悬停在文字元素上时，img会丢失其悬停事件，因此更好的解决方案将会更好将父div定位为：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial;
background-color: white;
font-size: 16px;
}
/* Section 1 */
.heading-pictures {
margin-top: 2%;
}
#top-picture {
margin-bottom: -4%;
}
.paragraph {
background-color: #95a5a6;
padding: 2%;
color: white;
text-align: justify;
}
.title {
position: absolute;
color: #6c7878;
}
.hd1 {
font-size: 5.25em;
}
.hd1,
.hd2 {
text-align: center;
padding-top: 15%;
line-height: 1;
}
.hd2 {
padding-top: 5%;
border-top: 1px solid #6c7878;
}
.section1 {
position: relative;
}
div.paragraph-quote {
margin-bottom: 4%;
background-color: rgba(0, 0, 0, 0)
}
hr.style-one {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
/* Section 2 */
.inventions {
width: 100%;
-webkit-filter: brightness(100%);
transition: all .3s ease-in, all .3s ease-out;
}
.images {
margin-top: 2%;
}
.section2 p {
text-align: center;
font-size: 2.5em;
color: #6c7878;
margin-top: 2%;
}
.section2 div {
margin-bottom: 2%;
}
.tesla-patents p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}
.tesla-patents p span a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
.tesla-patents p span a:hover,
.tesla-patents p span a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
/*Text on hover*/
.img-wrap:hover img {
-webkit-filter: brightness(40%);
}
div.images span {
background-color: rgba(0, 0, 0, 0);
padding: 0;
margin: 0 auto;
}
.img-description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
-webkit-transition: visibility opacity .3s ease-in, visibility opacity .3s ease-out;
}
.img-wrap:hover .img-description {
visibility: visible;
opacity: 1;
font-size: 3em;
text-align: center;
padding: 0;
margin: 25%;
color: white;
}
/* Section 3 */
.bio-heading {
font-size: 2.5em;
color: #6c7878;
padding: 0;
text-align: center;
margin-top: 1%;
margin-bottom: 3%;
}
#detailed-bio p {
text-align: justify;
color: white;
background-color: #95a5a6;
font-size: 1em;
padding: 1.5%;
margin-top: 1%;
}
#detailed-bio p a {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
#detailed-bio p a:hover,
#detailed-bio p a:visited {
color: white;
background-color: #95a5a6;
font-style: italic;
float: right;
text-decoration: underline;
}
footer {
font-size: .7em;
margin-bottom: 1%;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link href="tribute.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<title>Nikola Tesla, Engineer and Inventor</title>
</head>
<body>
<div class="container-fluid">
<!-- Section 1 -->
<div class="row">
<div class="section1 col-xs-12">
<div class="row">
<div class="title col-lg-offset-1 col-lg-3 col-md-offset-1 col-md-3 col-sm-offset-1 col-sm-3 col-xs-12">
<p class="hd1">Nikola Tesla</p>
<p class="hd2">Inventor and Engineer</p>
</div>
<div class="heading-pictures col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-12">
<img class="img-responsive" id="top-picture" src="http://www.anonews.co/wp-content/uploads/2016/01/kak_360001.jpg" alt="Image of Nikola Tesla">
</div>
<div class="paragraph-quote col-lg-7 col-lg-offset-1 col-md-7 col-lg-offset-1 col-sm-9 col-xs-12">
<p class="paragraph">"The day science begins to study non-physical phenomena, it will make more progress in one decade than in all the previous centuries of its existence." - Nikola Tesla</p>
</div>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 2 -->
<div class="row">
<div class="section2 col-xs-12">
<div class="row">
<div class="col-xs-12">
<p>What is Nikola Tesla known for?</p>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="https://skullscream.github.io/tributepage/images/pexels-photo-109998.jpeg" alt="PROJECT">
<span class="img-description">AC</span>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="https://skullscream.github.io/tributepage/images/pexels-photo-109998.jpeg">
<span class="img-description">NEONS</span>
</div>
<div class="images col-lg-4 col-xs-12 img-wrap">
<img class="img-responsive inventions" src="https://skullscream.github.io/tributepage/images/pexels-photo-109998.jpeg">
<span class="img-description">RADIO</span>
</div>
<div class="tesla-patents col-xs-12">
<p>Nikola Tesla was an inventor who obtained around 300 patents worldwide for his inventions. Some of Tesla's patents are not accounted for, and various sources have discovered some that have lain hidden in patent archives. There are a minimum
of 278 patents issued to Tesla in 26 countries that have been accounted for. Many of Tesla's patents were in the United States, Britain, and Canada, but many other patents were approved in countries around the globe. Many inventions developed
by Tesla were not put into patent protection. <span><a href="https://en.wikipedia.org/wiki/List_of_Nikola_Tesla_patents" target="_blank">Source</a></span>
</p>
</div>
</div>
</div>
</div>
<hr class="style-one">
<!-- Section 3 -->
<div class="row">
<div class="bio-section col-xs-12">
<p class="bio-heading">Biography</p>
<div id="detailed-bio">
<p>Nikola Tesla was born on July 10, 1856 in Smiljan, Lika, which was then part of the Austo-Hungarian Empire, region of Croatia. His father, Milutin Tesla was a Serbian Orthodox Priest and his mother Djuka Mandic was an inventor in her own right
of household appliances. Tesla studied at the Realschule, Karlstadt in 1873, the Polytechnic Institute in Graz, Austria and the University of Prague. At first, he intended to specialize in physics and mathematics, but soon he became fascinated
with electricity. He began his career as an electrical engineer with a telephone company in Budapest in 1881. It was there, as Tesla was walking with a friend through the city park that the elusive solution to the rotating magnetic field flashed
through his mind. With a stick, he drew a diagram in the sand explaining to his friend the principle of the induction motor. Before going to America, Tesla joined Continental Edison Company in Paris where he designed dynamos. While in Strassbourg
in 1883, he privately built a prototype of the induction motor and ran it successfully. Unable to interest anyone in Europe in promoting this radical device, Tesla accepted an offer to work for Thomas Edison in New York. His childhood dream
was to come to America to harness the power of Niagara Falls....<span id="read-more-link"><a href="http://www.teslasociety.com/biography.htm" target="_blank">Read more</a></span>
</p>
</div>
</div>
</div>
<hr class="style-one">
<footer>Website created by Milan for FreeCodeCamp. 25.8.2016.</footer>
</div>
</body>
</html>
答案 1 :(得分：0)
使用
#include<type_traits>
class B {
public:
enum ENU { T0,T1,T2 };
template<ENU T>
std::enable_if_t<(T==T1||T==T2),int>
f() { return 42; }
template<ENU T>
int g(){
static_assert(T==T1||T==T2, "not allowed");
return 42;
}
};
int main() {
B b;
b.f<B::T1>();
// It doesn't work
//b.f<B::T0>();
b.g<B::T1>();
// It doesn't work
//b.g<B::T0>();
}
取代
.img-wrap:hover > .inventions{
-webkit-filter: brightness(40%);
}
在tribute.css中：第118行
答案 2 :(得分：0)
更改悬停位置。目前你在图片标签中添加悬停效果。发明：悬停。在此处移动该效果.img-wrap：hover img