我试图使用CSS3实现标题的淡入淡出效果，但没有成功。我不确定自己做错了什么，因为我很确定自己遵循了W3 Schools教程。
您能帮助我修复代码，以便标题获得淡入淡出效果吗？我尝试应用悬停效果的类是.lesson-title，h1。
含义适用于标题为“识别您的商机”，“测试您的概念或产品”等的标题。
它们也是链接，因此您也可以将悬停效果应用于它们，作为另一种选择。
代码如下：
<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格式。抱歉，代码混乱。
谢谢！如果您需要更多详细信息，请回复我。
答案 0 :(得分：0)
我认为您的标签有误：
.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悬停在h1上，这是.lesson-title的子代。
您想说的是将鼠标悬停在h1上，其类别为.lesson-title。
希望有帮助！
答案 1 :(得分：0)
超级简单：将class="lesson-title"从<h1>标记（和.lesson-title h1:hover CSS）中删除。然后它起作用了（见下文）。
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>