Hướng dẫn show arrow on hover css - hiển thị mũi tên trên di chuột css

0

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang cố gắng chỉ hiển thị mũi tên khi chuột di chuột lên hình ảnh.

Có cách nào có thể được thực hiện trong CSS, HTML hoặc JavaScript.

Bất kỳ trợ giúp sẽ được đánh giá cao.

Thanks.

Hỏi ngày 26 tháng 8 năm 2016 lúc 0:57Aug 26, 2016 at 0:57

2

Nếu bạn muốn các mũi tên xuất hiện khi di chuột qua hình ảnh - một cách là có CSS ​​như sau (tôi đã làm mờ hình ảnh và mũi tên như văn bản thuần túy, nhưng chính vẫn giữ nguyên)

.prev,
.next 
{
  opacity: 0;
  transition: opacity 800ms;
}

.outerBox:hover .prev,
.outerBox:hover .next
{
    opacity: 1.0;
}

                <<<
                I am an image
                >>>

Tôi cũng đã thêm một quá trình chuyển đổi sang độ mờ, vì tôi thích chuyển tiếp: P

Đã trả lời ngày 26 tháng 8 năm 2016 lúc 1:14Aug 26, 2016 at 1:14

Jaromanda xjaromanda xJaromanda X

52.2K4 Huy hiệu vàng69 Huy hiệu bạc82 Huy hiệu Đồng4 gold badges69 silver badges82 bronze badges

1

Thêm mã này và vấn đề của bạn nên được khắc phục.

.prev, .next {
     visibility: hidden;
}
.prev:hover, .next:hover {
     visibility: hidden;
}

Hoặc mã này.

.prev, .next {
     color: /*whatever the background color is i.e. white*/;
}
.prev:hover, .next:hover {
     color: /*something contrasting from your background color i.e. black*/;
}

Đã trả lời ngày 26 tháng 8 năm 2016 lúc 1:09Aug 26, 2016 at 1:09

1

Làm thế nào để bạn thực hiện một mũi tên trái trong CSS?

Cách tiếp cận: Tạo một mũi tên bằng CSS rất đơn giản. Đầu tiên, tạo hình L (bảng chữ cái) bằng một số thuộc tính Box-Shadow và sau đó xoay nó theo một góc nào đó để căn chỉnh chúng (cả mũi tên trái và phải) lại với nhau. Mã HTML: Trong phần này, hai phần tử div được tạo, một cho mỗi mũi tên.

Lo lắng về việc cấp phép?Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

• Bạn có giấy phép phù hợp cho các mẫu và phông chữ của bạn không?
• Truy cập các yếu tố Envato đối tác của chúng tôi và mở khóa các bản tải xuống không giới hạn của hơn 50 triệu tài sản kỹ thuật số với cấp phép thương mại đầy đủ.
• Hơn 50 triệu tài sản với các bản tải xuống không giới hạn

Mẫu, addons, phông chữ, cảnh quay, ảnh, bàn chải, cài đặt trước và nhiều hơn nữa

Cấp phép thương mại đầy đủ cho công việc của khách hàng

Làm thế nào để bạn thực hiện một mũi tên trái trong CSS?

Cách tiếp cận: Tạo một mũi tên bằng CSS rất đơn giản. Đầu tiên, tạo hình L (bảng chữ cái) bằng một số thuộc tính Box-Shadow và sau đó xoay nó theo một góc nào đó để căn chỉnh chúng (cả mũi tên trái và phải) lại với nhau. Mã HTML: Trong phần này, hai phần tử div được tạo, một cho mỗi mũi tên.

Tìm hiểu cách tạo mũi tên với CSS.

Mũi tên bên phải:

Mũi tên trái:

Mũi tên lên:

Mũi tên xuống:

Cách tạo mũi tên

Bước 1) Thêm HTML:

Left arrow:

Up arrow:

Down arrow:

Thí dụ

Cách tạo mũi tên

Bước 1) Thêm HTML:
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

Thí dụ
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

Mũi tên phải: Mũi tên trái: Mũi tên lên: Mũi tên xuống:
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

Bước 2) Thêm CSS:
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow {& nbsp; Biên giới: Đen rắn; & nbsp; Độ rộng biên giới: 0 3px 3px 0; & nbsp; Hiển thị: Inline-Block; & nbsp; Đệm: 3px;}
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.right {& nbsp; biến đổi: xoay (-45deg); & nbsp; -WebKit-Transform: ROTATE (-45DEG);}

Làm thế nào để bạn thêm một mũi tên vào một thanh trượt trong CSS?

Làm thế nào để bạn vẽ một hộp với một mũi tên trong CSS?

Làm cách nào để hiển thị một mũi tên trong HTML?

Làm thế nào để bạn thực hiện một mũi tên trái trong CSS?