使用CSS将悬停效果应用于标题

Question

I'm trying to achieve a fade on hover effect to the headings using CSS3 with no success. 我正在尝试使用CSS3实现标题的淡入淡出效果，但没有成功。 I'm not sure what I did wrong as I am pretty sure that I followed the W3 Schools tutorial. 我不确定自己做错了什么，因为我很确定自己遵循了W3 Schools教程。

Could you help me with fixing the code so I can get the fade on hover effect for my headings? 您能帮我修复代码，以便标题获得淡入淡出效果吗？ The class that I'm trying to apply the hover effect is the .lesson-title, h1. 我尝试应用悬停效果的类是.lesson-title，h1。

Meaning it would apply to those headings with names such as "Identify Your Business Opportunity" "Test Your Concept or Product", etc., etc. 这意味着它适用于带有“识别您的商机”，“测试您的概念或产品”等名称的标题。

They are also links so you could also apply the hover effect to them as another option. 它们也是链接，因此您也可以将悬停效果应用到它们，作为另一个选择。

Here is the code: 这是代码：

 <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>

It will need to stay in HTML format as I will be copying/pasting this into a drag-and-drop website editor. 它需要保持HTML格式，因为我会将其复制/粘贴到拖放式网站编辑器中。 Sorry for the messy code. 抱歉，代码混乱。

Thanks! 谢谢！ If you need any more details, reply to me. 如果您需要更多详细信息，请回复我。

Answer 1

I think you've gotten your tag wrong: 我认为您的标签有误：

.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;
  }

should be 应该

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;
  }

The original selector means on hover for h1 which are a child of .lesson-title. 原始选择器将鼠标悬停在h1上，这是.lesson-title的子级。

Whereas what you wanted to say was on hover for h1 which have the class .lesson-title. 而您想说的是将鼠标悬停在h1上，其类别为.lesson-title。

Hope that helps! 希望有帮助！

Answer 2

Super simple: remove your class="lesson-title" from the <h1> tag (and .lesson-title h1:hover CSS) altogether. 非常简单：从<h1>标记（以及.lesson-title h1:hover CSS）中完全删除class="lesson-title" 。 Then it works (see below). 然后它起作用（请参见下文）。

 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>

使用CSS将悬停效果应用于标题

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-03-18 02:14:39

解决方案2
0 2019-03-18 02:58:57

使用CSS将悬停效果应用于标题

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-03-18 02:14:39

解决方案2 0 2019-03-18 02:58:57

解决方案1
0 已采纳 2019-03-18 02:14:39

解决方案2
0 2019-03-18 02:58:57