Я пытаюсь добиться эффекта затухания при наведении курсора, используя 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, поскольку я буду копировать / вставлять его в редактор веб-сайтов с помощью перетаскивания.Извините за грязный код.
Спасибо!Если вам нужна дополнительная информация, ответьте мне.