Question

在代码中，文本应包含在悬停中，但是当我将文本悬停时，没有任何效果。我的代码有问题吗？

注意：我知道在导入或修复代码时可能会破坏定位，但是可以修复它。另外，我尝试对文本应用悬停效果，但仍然没有效果

body{
margin-left: 8em;
margin-right: 8em;
}

.pseudo-selector{
position: relative;
}

.container {
  height: 500px;
  width: 50%;
  background:
  linear-gradient(
  rgba(24,39,61,0.50),
  rgba(24,39,61,0.90)
  ),
  url('math.jpg');
  background-size: cover;
  text-align: center;
  color: white;
}
h1{
	position: absolute;
	font-family: Lato;
	font-size: 25px;
    top: 50%;
	left: 25%;
    transform: translate(-50%, -50%);
	margin: auto;
	z-index: 10;
	}
#text{
	font-family: Open Sans;
	font-weight: bold;
	font-size: 40px;
	}
	
.container:hover{
	background: url('https://www.superprof.co.uk/blog/wp-content/uploads/2017/05/maths-methods-700x467.jpg');
	background-size: cover;
	transition: all 0.5s;
	transition-timing-function: ease;
	color: black;
	}
h1: hover{
	background: url('https://www.superprof.co.uk/blog/wp-content/uploads/2017/05/maths-methods-700x467.jpg');
	background-size: cover;
	transition: all 0.5s;
	transition-timing-function: ease;
	color: black;
	}

<html>
<head>
</head>
<body>
<div class="pseudo-selector">
<img class="container">
	<h1><div id="text">Math</div>Enjoy the wonders of solving through fun problems.</h1>
</div>

Answer 1

最好在父级上进行悬停，因此，当您将所有子级悬停时。有工作背景。好的代码：

    body{
    margin-left: 8em;
    margin-right: 8em;
    }

    .pseudo-selector{
    position: relative;
    }

    .container {
      display: block;
      height: 500px;
      width: 50%;
      background:
      linear-gradient(
      rgba(24,39,61,0.50),
      rgba(24,39,61,0.90)
      ),
      url('math.jpg');
      background-size: cover;
      text-align: center;
      color: white;
    }
    h1{
    	position: absolute;
    	font-family: Lato;
    	font-size: 25px;
        top: 50%;
    	left: 25%;
        transform: translate(-50%, -50%);
    	margin: auto;
    	z-index: 10;
    	}
    #text{
    	font-family: Open Sans;
    	font-weight: bold;
    	font-size: 40px;
    	}
    	
    .pseudo-selector:hover .container{
    	background: url('https://www.superprof.co.uk/blog/wp-content/uploads/2017/05/maths-methods-700x467.jpg');
    	background-size: cover;
    	transition: all 0.5s;    	
      transition-timing-function: ease;
    	color: black;
    	}

    <html>
    <head>
    </head>
    <body>
    <div class="pseudo-selector">
      <span class="container"></span>
    	<h1><div id="text">Math</div>Enjoy the wonders of solving through fun problems.</h1>
    </div>

将鼠标悬停在文本上时，为什么“悬停”效果被“禁用”？

1 个答案: