Dưới đây là Demo mình sử dụng HTML và Class khác so mới mã CSS chia sẻ mặc định để bạn dễ dàng hình dung và sử dụng hiệu quả.
Mã HTML Demo Hiệu ứng khi Hover vào Tiêu đề Menu Flatsome
Dưới đây là mã HTML
<div class="flatsomeio-hover-effect">
<ul>
<li><span>Items 1</span></li>
<li><span>Items 2</span></li>
<li><span>Items 3</span></li>
<li><span>Items 4</span></li>
<li><span>Items 5</span></li>
</ul>
</div>Trong ví dụ này mình không có thẻ a và thay bằng thẻ span
Mã CSS Demo Hiệu ứng khi Hover vào Tiêu đề Menu Flatsome
Dưới đây là mã CSS:
/* Thêm hiệu ứng khi Hover vào Tiêu đề Menu Flatsome | Flatsome.IO */
.flatsomeio-hover-effect li span:after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 0;
background-color: #008756; /* Màu sắc đường kẻ */
transition: width 0.45s cubic-bezier(0.5, 0, 0.5, 1);
}
.flatsomeio-hover-effect li span:hover:after, .flatsomeio-hover-effect li.active span:after {
width: 100%;
}
.flatsomeio-hover-effect li span {
font-weight: bold;
position: relative;
}Chú ý: Mình đã thêm CSS
position:relativeđể đảm bảo nếu bạn custom sẽ không bị lỗi.
Như vậy mình đã thay class .header-nav thành .flatsomeio-hover-effect. Tuy nhiên vấn đề xảy ra ở đây là thiếu class .active để nó hiển thị khi một trong các thẻ li > span được chọn hoặc kích hoạt. Vì thế chúng ta cần thêm mã Script để làm việc này.
Mã Script thêm class .active để có thể hoạt động hiệu quả.
Thêm mã Script sau vào Giao diện / Theme File Editor / Functions.php
function flatsomeio_add_script(){
?>
<script>
jQuery(document).ready(function ($) {
$(".flatsomeio-hover-effect li:first").addClass("active");
$(".flatsomeio-hover-effect li").click(function () {
if (!$(this).hasClass("active")) {
$(".flatsomeio-hover-effect li").removeClass("active");
$(this).addClass("active");
}
});
});
</script>
<?php
}
add_action('wp_footer', 'flatsomeio_add_script');Thành quả
Dưới đây là thành quả để bạn thưởng thức
- Items 1
- Items 2
- Items 3
- Items 4
- Items 5
Toàn bộ HTML CSS SCRIPT mình sử dụng trong DEMO
<div class="flatsomeio-hover-effect">
<ul>
<li><span>Items 1</span></li>
<li><span>Items 2</span></li>
<li><span>Items 3</span></li>
<li><span>Items 4</span></li>
<li><span>Items 5</span></li>
</ul>
</div>
<style>
/* Thêm hiệu ứng khi Hover vào Tiêu đề Menu Flatsome | Flatsome.IO */
.flatsomeio-hover-effect li span:after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 0;
background-color: #008756;
/* Màu sắc đường kẻ */
transition: width 0.45s cubic-bezier(0.5, 0, 0.5, 1);
}
.flatsomeio-hover-effect li span:hover:after,
.flatsomeio-hover-effect li.active span:after {
width: 100%;
}
.flatsomeio-hover-effect ul {
list-style: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
.flatsomeio-hover-effect li span {
position: relative;
cursor: pointer;
}
.flatsomeio-hover-effect li.active span {
font-weight: bold;
}
.flatsomeio-hover-effect li:hover span{
font-weight: bold;
}
.flatsomeio-hover-effect {
border: 1px solid #000;
padding-top: 2rem;
margin-bottom: 2rem;
border-radius: 12px;
}
</style>
<script>
jQuery(document).ready(function ($) {
$(".flatsomeio-hover-effect li:first").addClass("active");
$(".flatsomeio-hover-effect li").click(function () {
if (!$(this).hasClass("active")) {
$(".flatsomeio-hover-effect li").removeClass("active");
$(this).addClass("active");
}
});
});
</script>Tổng kết
Như vậy là mình chia sẻ tỉ mỉ và cụ thể nhất có thể. Bạn cần có kiến thức nền để áp dụng nó. Trên hết, người ta cho mình cần câu không phải cho bạn con cá, mặc dù mình cho bạn con cá rồi nhưng để ăn thì bạn phải tự nấu nha.
Link bài đăng chia sẻ: https://www.flatsome.io/tutorials/hieu-ung-khi-hover-vao-tieu-de-flatsome-716.html
Xin cám ơn và xin chào, hẹn gặp lại trong các demo khác. Theo dõi thêm trên Flatsome.IO bạn nhé
