Có thể bạn quan tâm
Một hiểu ứng cũng khá hay mà không cần tới jquery. Đó chính là làm mờ các phần tử không được hover qua. Nghĩa là các phần tử trong cùng 1 list khi hover quá list đó thì phần tử nào không được hover sẽ được mở đi
Làm mờ phần tử không được hover
Trước tiên ta tạo dựng chút html nhé
<ul class="list"> <li><a href="#" title="HTML"><img src="html5.png" alt="HTML"/></a></li> <li><a href="#" title="CSS"><img src="css3.png" alt="CSS"/></a></li> <li><a href="#" title="Wordpress"><img src="wordpress.png" alt="Wordpress"/></a></li> <li><a href="#" title="Jquery"><img src="jquery.gif" alt="Jquery"/></a></li> </ul>
Phần quan trọng là phần tác động có thể làm mờ các phần tử không được hover
.list:hover li a:not(:hover){ opacity: 0.1; }
Ngoài ra ta thêm các thuộc tính css khác để định dạng cho list và cho nó mượt mà hơn nha
a{ color: #01667b; text-decoration: none; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out } .list { list-style: none; } .list li { display: inline-block; float: left; } .list li img { width: 100px; }
Kết quả và demo
Demo: Làm mở các phần tử không được hover
Chúc các bạn thành công ^^
- Bình luận