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
