使用 CSS 对标题应用悬停效果
Apply a Hover Effect to Headings Using CSS
我正在尝试使用 CSS3 实现标题悬停效果的淡入淡出，但没有成功。我不确定我做错了什么，因为我很确定我遵循了 W3 Schools 教程。
你能帮我修复代码，让我的标题在悬停时淡入淡出吗？我尝试应用悬停效果的 class 是 .lesson-title, h1.
意思是它适用于名称如"Identify Your Business Opportunity" "Test Your Concept or Product"等的标题
它们也是链接，因此您也可以将悬停效果作为另一种选择应用到它们。
代码如下：
<html>
<head>
<style>
.cm-lessons {
background: #cecece;
padding: 2em;
max-width: 3000px;
margin: auto;
}
.cm-lessons h1{
font-size: 1.7em;
color: #00455e;
}
.cm-lessons ol, ul {
list-style: none;
}
.cm-lesson-marker span, ol, ul, li {
margin: 0;
padding-bottom: 30px;
border: 0;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border-bottom: 1px solid #00455e;
}
.last-lesson{
margin: 0;
padding-bottom: 30px;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border: none;
}
.cm-lesson-marker h1{
font-size: 3em;
}
#more-lessons{
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.lesson-title h1, h2, h3, u, ul{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
color: #00455e;
opacity: 1;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
ol, ul {
list-style: none;
}
.collapsible {
text-align: center;
color: #00455e;
cursor: pointer;
padding: 30px;
width: 100%;
font-size: 15px;
opacity: 1;
background-color: transparent;
border: none;
}
.active, .collapsible:hover {
opacity: 0.3;
}
</style>
</head>
<div>
<ul class="cm-lessons">
<h1>
For First-Time Business Owners
</h1>
<h3>
Lesson plans: 8
</h3>
<h2 class="lesson-title">
One hour webinar over a duration of 8 weeks.
</h2>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>01</h1>
</span>
<a href="http://www.yantern.com/webinar001-01">
<h1 class="lesson-title">Identify Your Business Opportunity</h1>
</a>
<p>Choosing what kind of business to start with can be a challenging task when confronted with many ideas and opportunities. It’s important to determine where your passions lie and to understand what it takes to start the business. You have to consider your skills and resources. The industry you are entering may be dying or a fast-growing and emerging business.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1 class="lesson-title">Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>03</h1></span>
<a href="http://www.yantern.com/webinar001-03">
<h1 class="lesson-title">Name Your Business</h1>
</a>
<p>Naming your business is important. The right business name will help you distinguish you from a sea of bland competitors, hence provide your customers with a reason to remember and use your company. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>04</h1>
</span>
<a href="http://www.yantern.com/webinar001-04">
<h1 class="lesson-title">Build a Business Plan</h1>
</a>
<p>For any start-ups, a business plan is an important tool and it also allows you to gain a better understanding of your industry structure, competitive landscape and the capital requirements of starting the small business. The plan lays out a vision of growth and the steps needed to get there.
</p>
</li>
<button class="collapsible">More lessons</button>
<div id="more-lessons">
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>05</h1>
</span>
<a href="http://www.yantern.com/webinar001-05">
<h1 class="lesson-title">Find Start-Up Money</h1>
</a>
<p>To start a business, you must invest in the business. The journey of finding start-up funds will be different for each individual. Some businesses require small amount or large amount of money to start. Finding the money you need may come from a source you would have never thought of.
</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>06</h1></span>
<a href="http://www.yantern.com/webinar001-06">
<h1 class="lesson-title">Choose a Business Structure</h1>
</a>
<p>Deciding on the structure of your business is not a decision to be taken lightly. Whether you have the LLC, a sole proprietorship or form a corporation; your choice will have an impact on your business liability and taxes. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>07</h1>
</span>
<a href="http://www.yantern.com/webinar001-07">
<h1 class="lesson-title">Get Your Business Licenses and Permits</h1>
</a>
<p>Depending on your chosen business structure, may need to register your business with the state authorities. Setting up your small business may require an employer identification number (EIN) which is also used by state taxing authorities to identify businesses. Additional paperwork can entail sales tax licenses and zoning permits. </p>
</li>
<li class="cm-lesson last-lesson">
<span class="cm-lesson-marker">
<h1>08</h1>
</span>
<a href="http://www.yantern.com/webinar001-08">
<h1 class="lesson-title">Get Business Insurance</h1>
</a>
<p>As a new small business owner, you have the responsibility to manage the risks associated with your business. Don't put your new startup at risk without getting the proper small business insurance to protect your company in the event of a disaster or litigation.</p>
</li>
</ul>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
它需要保持 HTML 格式，因为我将 copying/pasting 将其转换为 drag-and-drop 网站编辑器。抱歉代码乱七八糟。
谢谢！如果您需要更多详细信息，请回复我。
我想你弄错了标签：
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
应该是
h1.lesson-title:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
原来的选择器意味着悬停在 h1 上，它是 .lesson-title 的子项。
而您想说的是悬停在 h1 上，它有 class.lesson-title.
希望对您有所帮助！
超级简单：从 <h1> 标签（和 .lesson-title h1:hover CSS）中完全删除您的 class="lesson-title"。然后就可以了（见下文）。
h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1>Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
我正在尝试使用 CSS3 实现标题悬停效果的淡入淡出，但没有成功。我不确定我做错了什么，因为我很确定我遵循了 W3 Schools 教程。
你能帮我修复代码，让我的标题在悬停时淡入淡出吗？我尝试应用悬停效果的 class 是 .lesson-title, h1.
意思是它适用于名称如"Identify Your Business Opportunity" "Test Your Concept or Product"等的标题
它们也是链接，因此您也可以将悬停效果作为另一种选择应用到它们。
代码如下：
<html>
<head>
<style>
.cm-lessons {
background: #cecece;
padding: 2em;
max-width: 3000px;
margin: auto;
}
.cm-lessons h1{
font-size: 1.7em;
color: #00455e;
}
.cm-lessons ol, ul {
list-style: none;
}
.cm-lesson-marker span, ol, ul, li {
margin: 0;
padding-bottom: 30px;
border: 0;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border-bottom: 1px solid #00455e;
}
.last-lesson{
margin: 0;
padding-bottom: 30px;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border: none;
}
.cm-lesson-marker h1{
font-size: 3em;
}
#more-lessons{
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.lesson-title h1, h2, h3, u, ul{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
color: #00455e;
opacity: 1;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
ol, ul {
list-style: none;
}
.collapsible {
text-align: center;
color: #00455e;
cursor: pointer;
padding: 30px;
width: 100%;
font-size: 15px;
opacity: 1;
background-color: transparent;
border: none;
}
.active, .collapsible:hover {
opacity: 0.3;
}
</style>
</head>
<div>
<ul class="cm-lessons">
<h1>
For First-Time Business Owners
</h1>
<h3>
Lesson plans: 8
</h3>
<h2 class="lesson-title">
One hour webinar over a duration of 8 weeks.
</h2>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>01</h1>
</span>
<a href="http://www.yantern.com/webinar001-01">
<h1 class="lesson-title">Identify Your Business Opportunity</h1>
</a>
<p>Choosing what kind of business to start with can be a challenging task when confronted with many ideas and opportunities. It’s important to determine where your passions lie and to understand what it takes to start the business. You have to consider your skills and resources. The industry you are entering may be dying or a fast-growing and emerging business.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1 class="lesson-title">Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>03</h1></span>
<a href="http://www.yantern.com/webinar001-03">
<h1 class="lesson-title">Name Your Business</h1>
</a>
<p>Naming your business is important. The right business name will help you distinguish you from a sea of bland competitors, hence provide your customers with a reason to remember and use your company. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>04</h1>
</span>
<a href="http://www.yantern.com/webinar001-04">
<h1 class="lesson-title">Build a Business Plan</h1>
</a>
<p>For any start-ups, a business plan is an important tool and it also allows you to gain a better understanding of your industry structure, competitive landscape and the capital requirements of starting the small business. The plan lays out a vision of growth and the steps needed to get there.
</p>
</li>
<button class="collapsible">More lessons</button>
<div id="more-lessons">
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>05</h1>
</span>
<a href="http://www.yantern.com/webinar001-05">
<h1 class="lesson-title">Find Start-Up Money</h1>
</a>
<p>To start a business, you must invest in the business. The journey of finding start-up funds will be different for each individual. Some businesses require small amount or large amount of money to start. Finding the money you need may come from a source you would have never thought of.
</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>06</h1></span>
<a href="http://www.yantern.com/webinar001-06">
<h1 class="lesson-title">Choose a Business Structure</h1>
</a>
<p>Deciding on the structure of your business is not a decision to be taken lightly. Whether you have the LLC, a sole proprietorship or form a corporation; your choice will have an impact on your business liability and taxes. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>07</h1>
</span>
<a href="http://www.yantern.com/webinar001-07">
<h1 class="lesson-title">Get Your Business Licenses and Permits</h1>
</a>
<p>Depending on your chosen business structure, may need to register your business with the state authorities. Setting up your small business may require an employer identification number (EIN) which is also used by state taxing authorities to identify businesses. Additional paperwork can entail sales tax licenses and zoning permits. </p>
</li>
<li class="cm-lesson last-lesson">
<span class="cm-lesson-marker">
<h1>08</h1>
</span>
<a href="http://www.yantern.com/webinar001-08">
<h1 class="lesson-title">Get Business Insurance</h1>
</a>
<p>As a new small business owner, you have the responsibility to manage the risks associated with your business. Don't put your new startup at risk without getting the proper small business insurance to protect your company in the event of a disaster or litigation.</p>
</li>
</ul>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
它需要保持 HTML 格式，因为我将 copying/pasting 将其转换为 drag-and-drop 网站编辑器。抱歉代码乱七八糟。
谢谢！如果您需要更多详细信息，请回复我。
我想你弄错了标签：
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
应该是
h1.lesson-title:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
原来的选择器意味着悬停在 h1 上，它是 .lesson-title 的子项。
而您想说的是悬停在 h1 上，它有 class.lesson-title.
希望对您有所帮助！
超级简单：从 <h1> 标签（和 .lesson-title h1:hover CSS）中完全删除您的 class="lesson-title"。然后就可以了（见下文）。
h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1>Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>