در این مطلب و مطالب بعدی ، تعدادی کد برای هاور شدن روی لینک رو ، در اختیارتون میزارم.
میبینید که هر وقت روی لینکها هاور ( hover ) میکنید ، استایل مربوطه فعال میشه.
کدهای HTML :
|
1
2
3
|
<section class=“link-fadeinbg”>
<p>It had been my luck to live en famille with some <a href=“#”>herder</a> Lapps once before in <a href=“#”>North-Western Norway</a>. I had some elk shooting and some fishing up there, and I came across the tribe one <a href=“#”>day poaching</a> red char from one of my own hired lakes.</p>
</section>
|
کدهای CSS :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
section {
position: relative;
z-index: 1; /* needed for setting pseudo-element z-index */
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 40px;
display: block;
}
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
white-space: nowrap;
}
section a::before,
section a::after {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Fade in background */
.link-fadeinbg {
background: rgba(149,165,166,0.1);
}
.link-fadeinbg a {
border-bottom: 1px solid rgba(52,73,94,0.4);
font-weight: 500;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
.link-fadeinbg a:hover,
.link-fadeinbg a:focus {
border-color: rgba(52,73,94,0);
background-color: rgba(52,73,94,0.1);
}
|
منبع: سون لرن
