Tại sao CSS di chuột của tôi không hoạt động?

Trang chủ › Diễn đàn › Thiết kế › Hover on Button not Working

• Chủ đề này trống

Đang xem 3 bài đăng - 1 đến 3 (trong tổng số 3)

• Tác giả

  bài viết

• 1 tháng 10, 2018 lúc 5. 19 giờ sáng #277186

  
  tân thành

  người tham gia

  Tôi có một nút có nhịp hiển thị biểu tượng.
  Tôi có thể thay đổi màu của biểu tượng nhưng không thể thay đổi khi di chuột.

  .ico {
      display: block;
      color: #fff;
  }
  
  .ico:hover {
      color: #ED1C24;
  }
  
  button {
      text-align: center;
      background: transparent;
      font-size: 50px;
      transition: all 0.3s ease 0s;
      margin: 50% 20px 0 0;
      border: none;
      width: auto;
      height: 50px;
  }
  

  Tôi đang làm gì sai?

  1 tháng 10, 2018 lúc 6. 01 giờ sáng #277187

  
  Beverleyh

  người tham gia

  Bạn có muốn thay đổi màu biểu tượng khi bạn di chuột qua nút không?

  button:hover > .ico
  

  1 tháng 10, 2018 lúc 6. 38 giờ sáng #277188

  tân thành

  người tham gia

  Cảm ơn bạn rất nhiều, điều này làm việc như một cơ duyên

• Tác giả

  bài viết

Đang xem 3 bài đăng - 1 đến 3 (trong tổng số 3)

• Diễn đàn 'Thiết kế' đã đóng cửa cho các chủ đề và câu trả lời mới

Có vẻ như bộ chọn gốc trên quy tắc di chuột của bạn không chính xác. Hãy thử thay đổi nó thành .scriptlesssocialsharing__buttons a.button:hover. Ngoài ra, vì bạn có !important trên màu nền ban đầu, nên bạn cũng cần tạo màu di chuột là !important. Hy vọng rằng sẽ giúp

Vì vậy, điều này có nghĩa là CSS sẽ ghi đè các lệnh trước đó dựa trên thứ tự bạn đặt chúng vào, phải không?

…Tôi tin rằng điều này nên được giải thích ở đâu đó trong khóa học

Cảm ơn bạn, tôi đã có cùng một vấn đề

Nếu bạn dùng. quan trọng là mức độ ưu tiên của quy tắc trở nên cao hơn bất kỳ quy tắc nào khác và bạn không thể cập nhật giá trị nữa bằng cách đặt thuộc tính kiểu động với JS. Tốt hơn hết là bạn phải tăng thêm mức độ ưu tiên của bộ chọn một cách "tự nhiên" hơn (bằng cách thêm các thông số kỹ thuật vào bộ chọn). Dù sao, nếu tôi loại bỏ cả hai. quan trọng từ nút #main của bạn. quy tắc css di chuột,. hiệu ứng di chuột hoạt động tốt. không biết những gì bạn đã cố gắng sửa chữa, vì vậy;)

Lạ lùng. Đó chính xác là những gì tôi đang làm, nhưng nó không hoạt động. Có thể có điều gì đó liên quan đến phần còn lại của html hoặc css của tôi khiến nó hoạt động. Tôi sẽ bao gồm phần còn lại của mã của tôi bên dưới

css

f.header-text {
	font-family: Courier New;
}

.panel-icon {
	height: 50px;
	width: 50px;
}

.dashboard-list {
	display: inline;
	align-content: flex-end;
}

.menu-bar-item {
	margin-top: -10px;
	font-family: Courier New;
	padding: 10px 20px;
	background-color: transparent;
	color: black; 

}

.menu-bar-item:hover {
	color: white;
}

.menu-bar {
	margin: auto;
	padding: 10px;
	border-spacing: 5px;
}

#root {
	background-color: lightblue;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

#canvasDiv {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#profile {
	display: flex;

}

#headshot {
	border-radius: 50%;
	height: 240px;
	width: 180px;
	border: 3px solid black;
}

#profile_info {
	display: flex;
	flex-direction: column;
}

#name {
	margin-bottom: 15px;
}

#quicklinks {
	display: flex;
	margin-top: 50px;
}

.small_icon {
	width: 75px;
	height: 60px;
	background-color: transparent;
	margin-left: 15px;
	margin-right: 15px;
}

#download:hover {
	background: #89bdc9;
	opacity: .8;
}

#small_icon:hover {
	background: #89bdc9;
	opacity: .8;
}

a:hover {
	color: white;
	background: #89bdc9;
	opacity: .8;
}

html

	
	
	
	



	


		
		


			
				About
			

			
				Resume
			

			
				Projects
			

		
		

			

				

			
			

				
Andrew McFarlane
				
Software Engineer based out of Langley, BC
				

					

						

					
					

						

					
					

						

					
					

						

					
					
				
				
			
		
		

			
		
	

Làm cách nào để sử dụng hover trong CSS?

Tại sao di chuột không hoạt động trong phản ứng?

Di chuột có hoạt động trên div không?

Tại sao Hover không hoạt động trong chế độ xem trên thiết bị di động?