Làm mờ các phần tử không được hover

Cập nhật lần cuối 18/03/2017 by trong HTML&CSS vào 30/11/2013 có 2256 Views

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é

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

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

3/5 - (2 votes)
Từ khóa: , ,
  • Bình luận
Sản phẩm nổi bật của Toản
x