Mô tả Box sử dụng "onmouseover"

Question

tôi đang chơi với sự kiện onmouseover trong javascript

Tôi muốn một hộp nhỏ để bật lên và tiếp tục cho đến khi không có onmouseover nữa

Tôi nghĩ rằng nó được gọi là một mô tả hộp, nhưng tôi không chắc chắn.

Làm cách nào để có một hộp nhỏ bật lên bằng văn bản tùy chỉnh khi tôi đặt chuột lên một số văn bản nhất định và biến mất khi tôi di chuyển chuột đến đối tượng khác ..?

Answer 1

Giả sử popup là ID của "hộp mô tả" của bạn:

HTML

<div id="parent"> 
This is the main container. 
<div id="popup" style="display: none">some text here</div> 
</div> 

Javascript

var e = document.getElementById('parent'); 
e.onmouseover = function() { 
    document.getElementById('popup').style.display = 'block'; 
} 
e.onmouseout = function() { 
    document.getElementById('popup').style.display = 'none'; 
} 

Hoặc bạn có thể thoát khỏi Javascript hoàn toàn và làm điều đó chỉ với CSS:

CSS

#parent #popup { 
    display: none; 
} 

#parent:hover #popup { 
    display: block; 
} 

Answer 2

Tôi sẽ thử làm điều này với hệ thống xử lý sự kiện .hover() của jQuery, giúp bạn dễ dàng hiển thị div bằng chú giải công cụ khi con trỏ trên văn bản và ẩn nó khi nó đã biến mất.

Dưới đây là một ví dụ đơn giản.

HTML:

​<p id="testText">Some Text</p> 
<div id="tooltip">Tooltip Hint Text</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS cơ bản:

​#​tooltip { 
display:none; 
border:1px solid #F00; 
width:150px; 
}​ 

jQuery:

$("#testText").hover(
    function(e){ 
     $("#tooltip").show(); 
    }, 
    function(e){ 
     $("#tooltip").hide(); 
    });​​​​​​​​​​ 

Answer 3

Vâng, tôi đã thực hiện một kịch bản hai lớp lót đơn giản cho điều này, nhỏ của nó và làm những gì bạn muốn.

Kiểm tra nó http://jsfiddle.net/9RxLM/

nó một giải pháp jquery: D

Answer 4

Mặc dù không nhất thiết phải là một giải pháp JavaScript, đó cũng là một "danh hiệu" thuộc tính thẻ toàn cầu có thể hữu ích.

<a href="https://stackoverflow.com/questions/3559467/description-box-on-mouseover" title="This is a mouseover title">Mouseover me</a> 

Mouseover me