Đổi màu border khi hover vào bài viết, sản phẩm bằng css

Làm thế nào để đổi màu border của bài viết, sản phẩm… khi chúng ta hover chuột vào nó? Nếu bạn đang học lập trình web và trên là điều bạn đang vướng mắc thì trong bài viết này tôi chia sẻ cho bạn từng bước cách làm điều đó.

Video hướng dẫn đổi màu border khi hover bài viết trong css

Để giúp bạn dễ dàng nắm bắt tôi đã tạo video bên dưới, bạn xem để hiểu tư duy và thực hành lại từng bước.

Mã code html css

Bên dưới là mã nguồn của video hướng dẫn này, bạn copy nó đưa vào trình soạn thảo code Visual Studio Code để chạy và xem thành quả nhé.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change border when hover images</title>
</head>

<body>
    <style>
        #wrapper {
            margin: 0px auto;
            max-width: 960px;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        ul.list-posts {
            list-style: none;
            padding-left: 0;
            display: flex;
            flex-wrap: wrap;
        }
        ul.list-posts li {
            width: 50%;
            padding: 0px 15px;
            box-sizing: border-box;
            margin-bottom: 30px;
        }
        ul.list-posts li .post-item {
            padding: 10px;
            border: 2px solid #f5f5f5;
        }
        ul.list-posts li:hover .post-item {
            border: 2px solid #e2b8b8;
            transition: all 0.25s ease-in-out;
        }
        ul.list-posts li .post-item img {
            max-width: 100%;
            height: auto;
        }
        ul.list-posts li p {
            padding: 5px;
        }
    </style>
    <div id="wrapper">
        <h1>Hiệu ứng đổi màu border khi hover bài viết với html css</h1>
        <ul class="list-posts">
            <li>
                <div class="post-item">
                    <a href="" class="post-thumb">
                        <img src="images/b-1.jpg" alt="">
                    </a>
                    <a href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, explicabo!</a>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium totam dolores reprehenderit
                        aliquam
                        ipsa eos numquam ullam perferendis vel! Provident.</p>
                </div>
            </li>
            <li>
                <div class="post-item">
                    <a href="" class="post-thumb">
                        <img src="images/b-5.jpg" alt="">
                    </a>
                    <a href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, explicabo!</a>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium totam dolores reprehenderit
                        aliquam
                        ipsa eos numquam ullam perferendis vel! Provident.</p>
                </div>
            </li>
            <li>
                <div class="post-item">
                    <a href="" class="post-thumb">
                        <img src="images/b-3.jpg" alt="">
                    </a>
                    <a href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, explicabo!</a>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium totam dolores reprehenderit
                        aliquam
                        ipsa eos numquam ullam perferendis vel! Provident.</p>
                </div>
            </li>
            <li>
                <div class="post-item">
                    <a href="" class="post-thumb">
                        <img src="images/b-4.jpg" alt="">
                    </a>
                    <a href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, explicabo!</a>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium totam dolores reprehenderit
                        aliquam
                        ipsa eos numquam ullam perferendis vel! Provident.</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Video trên phù hợp với những người đã có nền tảng cơ bản về html, css. Nếu bạn đang học lập trình web và đang cảm thấy bạn đang yếu phần này và muốn học tập trung để đi làm thì có thể tham khảo chương trình Html Css 21 Ngày

Đề xuất cho bạn

Subscribe
Notify of
guest

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

Tặng Ebook chia sẻ kinh nghiệm học lập trình web đi làm cho người mới bắt đầu!

Đây là tấm bản đồ chia sẻ lại cách học lập trình web đi làm đã giúp nhiều học trò của unitop kiếm được thu nhập từ 8-30tr mỗi tháng.

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x