Chỉ sử dụng CSS, hiển thị div khi di chuột qua <a>

Tôi muốn hiển thị div khi ai đó di chuyển qua một <a>phần tử, nhưng tôi muốn làm điều này bằng CSS chứ không phải JavaScript. Bạn có biết làm thế nào điều này có thể đạt được?

Bạn có thể làm một cái gì đó như thế này :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Điều này sử dụng bộ chọn anh chị em liền kề , và là cơ sở của menu thả xuống cá mút .

HTML5 cho phép các phần tử neo bao bọc hầu hết mọi thứ, vì vậy trong trường hợp đó, divphần tử có thể được tạo thành một phần tử con của phần tử neo. Mặt khác, nguyên tắc là như nhau - sử dụng lớp :hovergiả để thay đổi thuộc displaytính của phần tử khác.

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

Vì câu trả lời này là phổ biến nên tôi nghĩ cần một lời giải thích nhỏ. Sử dụng phương pháp này khi bạn di chuột vào phần tử bên trong, nó sẽ không biến mất. Bởi vì .showme ở bên trong .showhim nó sẽ không biến mất khi bạn di chuyển chuột giữa hai dòng văn bản (hoặc bất cứ thứ gì).

Đây là những ví dụ về các quirq bạn cần quan tâm khi thực hiện hành vi đó.

Tất cả phụ thuộc vào những gì bạn cần điều này cho. Phương pháp này tốt hơn cho kịch bản kiểu menu, trong khi Yi Jiang thì tốt hơn cho các chú giải công cụ.

Tôi thấy sử dụng opacity là tốt hơn, nó cho phép bạn thêm các chuyển tiếp css3 để tạo hiệu ứng di chuột hoàn thành tốt đẹp. Các chuyển đổi sẽ bị loại bỏ bởi các trình duyệt IE cũ hơn, do đó, nó sẽ xuống cấp một cách duyên dáng.

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Tôi biết có nghĩa là một chuyên gia, nhưng tôi vô cùng tự hào về bản thân vì đã làm việc gì đó về mã này. Nếu bạn làm:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

(Lưu ý '>') Bạn có thể chứa toàn bộ nội dung trong thẻ, sau đó, miễn là trình kích hoạt của bạn (có thể là div của chính nó, hoặc thẳng lên trong thẻ hoặc bất cứ thứ gì bạn muốn) đều chạm vào thực tế div tiết lộ, bạn có thể di chuyển chuột của bạn từ người này sang người khác.

Có thể điều này không hữu ích cho lắm, nhưng tôi phải đặt div được tiết lộ của mình thành tràn: auto, vì vậy đôi khi nó có các thanh cuộn, không thể sử dụng ngay khi bạn rời khỏi div.

Trên thực tế, sau khi tìm ra cách tạo div được tiết lộ, (mặc dù bây giờ nó là con của trình kích hoạt, không phải là anh chị em), hãy ngồi sau trình kích hoạt, về chỉ số z, (với một chút trợ giúp từ trang này : Làm thế nào để có được một phần tử cha xuất hiện ở trên con ) bạn thậm chí không phải cuộn qua div đã tiết lộ để cuộn nó, chỉ cần di chuột qua cò súng và sử dụng bánh xe của bạn, hoặc bất cứ điều gì.

Div tiết lộ của tôi bao gồm hầu hết các trang, vì vậy kỹ thuật này làm cho nó vĩnh viễn hơn nhiều, thay vì màn hình nhấp nháy từ trạng thái này sang trạng thái khác với mỗi lần di chuyển của chuột. Nó thực sự trực quan thực sự, do đó tại sao tôi thực sự khá tự hào về bản thân mình.

Nhược điểm duy nhất là bạn không thể đặt các liên kết trong toàn bộ, nhưng bạn có thể sử dụng toàn bộ như một liên kết lớn.

Câu trả lời này không yêu cầu bạn biết loại màn hình (nội tuyến, v.v.), yếu tố có thể ẩn được cho là khi được hiển thị:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

Cái này sử dụng bộ chọn anh chị em liền kề và bộ chọn không .

Tôi muốn cung cấp giải pháp mẫu cho mục đích chung này mở rộng dựa trên giải pháp chính xác do Yi Jiang cung cấp.

Các lợi ích bổ sung bao gồm:

• hỗ trợ di chuột qua bất kỳ loại phần tử nào, hoặc nhiều phần tử;
• cửa sổ bật lên có thể là bất kỳ loại phần tử hoặc tập hợp các phần tử, bao gồm các đối tượng;
• mã tự ghi;
• đảm bảo cửa sổ bật lên xuất hiện trên các yếu tố khác;
• một cơ sở âm thanh để làm theo nếu bạn đang tạo mã html từ cơ sở dữ liệu.

Trong html bạn đặt cấu trúc sau:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

Trong css bạn đặt cấu trúc sau:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

Một vài điểm cần lưu ý là:

1. Vì vị trí của div.popup được đặt thành cố định (cũng sẽ hoạt động tuyệt đối) nên nội dung không nằm trong luồng thông thường của tài liệu cho phép thuộc tính hiển thị hoạt động tốt.
2. chỉ mục z được đặt để đảm bảo div.popup xuất hiện phía trên các thành phần trang khác.
3. Information_popup_container được đặt ở kích thước nhỏ và do đó không thể di chuột qua.
4. Mã này chỉ hỗ trợ di chuột qua phần tử div.inif. Để hỗ trợ di chuột qua cả div.in information và div.popup, hãy xem Hover Over The Popup bên dưới.
5. Nó đã được thử nghiệm và hoạt động như mong đợi trong Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 và Google Chrome 28.0.15.

Di chuột qua cửa sổ bật lên

Như thông tin bổ sung. Khi cửa sổ bật lên chứa thông tin mà bạn có thể muốn cắt và dán hoặc chứa một đối tượng mà bạn có thể muốn tương tác thì trước tiên hãy thay thế:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

với

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

Và thứ hai, điều chỉnh vị trí của div.popup để có sự trùng lặp với div.inif. Một vài pixel là đủ để đảm bảo rằng div.popup có thể nhận được di chuột khi di chuyển bộ chuyển đổi khỏi div.inif.

Điều này không hoạt động như mong đợi với Internet Explorer 10.0.9200 và hoạt động như mong đợi với Opera 12.16, Firefox 18.0 và Google Chrome 28.0.15.

Xem fiddle http://jsfiddle.net/F68Le/ để biết ví dụ đầy đủ với menu đa cấp bật lên.

vui lòng kiểm tra mã này

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

Phần tử +cho phép 'select' đầu tiên không được lồng nhau, >chỉ các phần tử lồng nhau được chọn - tốt hơn là sử dụng ~cho phép chọn phần tử tùy ý là phần tử con của phần tử di chuột cha. Sử dụng độ mờ / chiều rộng và chuyển tiếp, bạn có thể cung cấp xuất hiện trơn tru

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Đối với tôi, nếu tôi muốn tương tác với div ẩn mà không thấy nó biến mất mỗi lần tôi rời khỏi phần tử kích hoạt (a trong trường hợp đó) tôi phải thêm:

div:hover {
    display: block;
}

Dựa trên câu trả lời chính, đây là một ví dụ, hữu ích để hiển thị một chú giải công cụ thông tin khi nhấp vào ?một liên kết gần:

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

Từ thử nghiệm của tôi bằng CSS này:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

Và HTML này:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

, kết quả là nó mở rộng bằng cách sử dụng cái thứ hai, nhưng không mở rộng bằng cái thứ nhất. Vì vậy, nếu có một div giữa mục tiêu di chuột và div ẩn, thì nó sẽ không hoạt động.

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen: di chuột trên div hiển thị văn bản trong div khác

Đừng quên. nếu bạn đang cố di chuột xung quanh một hình ảnh, bạn phải đặt nó xung quanh một thùng chứa. css:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

Nếu bạn di chuột vào đây:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

Điều này sẽ hiển thị:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>