CSS transition không thể hoạt động khi không đi cùng với overflow: hidden?

#1

Tình hình là em đang làm CSS cho chữ mà khi hover khung chữ thì nó sẽ tràn màu vào khung chữ. Vấn đề của em đặt ra là có phải muốn sử dụng transition thì phải thêm thuộc tính overflow:hidden không ạ vì khi em bỏ overflow:hidden thì màu lại không tràn từ từ vào chữ nữa mà nó hiện sẵn luôn!

#2

Đưa code lên đây, nói khơi khơi vậy ai hiểu bạn nói gì.

Không thể hoạt động đâu mà không thể hoạt động, mà do nếu không kết hợp đúng/ không kết hợp thì nó ra không như mong đợi. Cho nên, có những cái là do mẹo của những người làm CSS lâu ngày và họ phát hiện ra, nếu muốn làm giống họ thì bắt chước giống họ hoặc vào các trang thảo luận chuyên sâu về CSS để người ta giải thích cho tường tận.

Khi có code ở đây, nhiều người khác soi vào sẽ giải thích kỹ cho bạn, còn không, hãy “ngàn năm vẫn đợi” thôi bạn.

1 Like
#3 
file CSS ạ
.textimage {
	width:600px;
}
body{
    background-color:black;
}

.tu:before{
    content: attr(data);
}

.tu{
	color: white;
	color: transparent;
        position:relative;
        white-space: nowrap;
	-webkit-text-stroke-width: 0.5px;
	-webkit-text-stroke-color: white;
}


.tu:after{
  content: attr(data);
  position: absolute;
  color: white;
  left: 0;
  width: 0;
  transition: width 5s;
  overflow: hidden;
  white-space: nowrap;
        } 
.tu:hover:after{
    width: 100%;
}
#4 
file HTML
<html>
	<head>
		<link rel="stylesheet" href="style.css" />
        </head>
    <body>
        <div class="textimage">
		<h1 class="tu" data="header"></h1>
               <img src="https://i.pinimg.com/originals/5a/01/dc/5a01dc40f06b1f453e0fcc6241b38a85.jpg"/>
              <p>subheader</p>

        </div>
	</body>

</html>
#5

Dạ vâng anh thông cảm cho em nha tại em hơi lúa cái phần đăng bài. :grin:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?