Hiển thị JQuery Div trên Hover

Question

Tôi đang cố gắng tìm hiểu cách sử dụng JQuery để hiển thị một số công cụ khi người dùng di chuột qua khối nội dung. Ví dụ, các khối được hiển thị như sau với các công cụ ban đầu ẩn:

<div id="block_1"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

<div id="block_2"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

tôi cần nó để hiển thị các công cụ cho block_1 khi người dùng di chuột lên bất cứ điều gì trong block_1.

Tôi thấy rằng bạn có thể sử dụng ký tự đại diện để làm một cái gì đó như:

$("*[id^=block_]").hover(
    function() { 
     // somehow toggle div.tools for this block 
    }, 
    function() { 
     // somehow toggle div.tools for this block 
    } 

Tôi chỉ không thể tìm ra cách bạn đặc biệt có thể chuyển đổi chỉ là div.tools cho khối ...

Answer 1

Làm điều này:

$("*[id^=block_]").hover(
    function() { 
     // Styles to show the box 
     $(this).children('.tools').css(...); 
    }, 
    function() { 
     // Styles to hide the box 
     $(this).children('.tools').css(...); 
    } 
); 

Bạn có thể muốn xem xét việc chỉ sử dụng $.addClass() và $.removeClass(), vì nó sẽ dễ dàng hơn nhiều để quản lý.

Answer 2

EDIT: Cuối cùng, nếu bạn chỉ làm thay đổi phong cách đơn giản, bạn nên sử dụng CSS để thực hiện điều này. Không phải javascript.

CSS này sẽ không hoạt động cho IE6, nhưng nó sẽ dành cho khá nhiều các trình duyệt hiện đại khác.

Cho phụ huynh block_ yếu tố một lớp học như block, loại bỏ các phong cách nội tuyến từ tools, sau đó làm điều này:

.block .tools { 
    display: none; 
} 
.block:hover .tools { 
    display: block; 
} 

---

Bạn có thể làm điều này:

$(function() { 
    $("div[id^=block_]").hover(function (e) { 
     $(this).children('.tools').toggle(e.type === 'mouseenter'); 
    }); 
}); 

Mặc dù tôi nghĩ Tôi muốn thêm một lớp học chung vào các phần tử block_ và chọn theo lớp đó:

$(function() { 
    $("div.block").hover(function (e) { 
     $(this).children('.tools').toggle(e.type === 'mouseenter'); 
    }); 
}); 

HTML

<div class="block" id="block_1"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

<div class="block" id="block_2"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

Bên trong xử lý sự kiện, từ khóa this đề cập đến yếu tố đó đã nhận được sự kiện này. Trong trường hợp này, phần tử có mã số block_n.

Sau đó, bạn sử dụng the .children() method để chọn (các) thành phần con có lớp tools.

The .toggle() method có thể được sử dụng để hiển thị/ẩn các phần tử. Tôi đã cho nó một đối số đó là kết quả của việc kiểm tra loại sự kiện diễn ra. Nếu sự kiện là 'mouseenter', thì .tools sẽ được hiển thị, nếu không nó sẽ bị ẩn.

Bên ngoài $(function() {...}); là phím tắt để gói mã của bạn theo số jQuery's .ready() method, đảm bảo rằng mã của bạn không chạy cho đến khi DOM sẵn sàng.

Bạn có thể cung cấp the .hover() method hai chức năng nếu bạn muốn. Sau đó, tôi sẽ sử dụng các phương pháp .show() và .hide() thay vì .toggle().

$(function() { 
    $("div[id^=block_]").hover(function() { 
     $(this).children('.tools').show(); 
    }, function() { 
     $(this).children('.tools').hide(); 
    }); 
}); 

Answer 3

$("*[id^=block_]").hover(function() { 
    $(this).children('.tools').toggle(); 
}); 

Answer 4

Bạn có thể thử này:

$(document).ready(function(){ 
$('#block_1').mouseover(function(e){ 
$('#block_2').show(); 
}); 
$('#block_1').mouseout(function(e){ 
$('#block_2').hide(); 
}); 
}); 

Dưới đây là cách thêm một hiệu ứng mờ dần đẹp:

$(document).ready(function(){ 
$('#block_1').mouseover(function(e){ 
$('#block_2').fadeIn('fast'); 
}); 
$('#block_1').mouseout(function(e){ 
$('#block_2').fadeOut('fast'); 
}); 
}); 

Answer 5

cuối cùng tôi tìm thấy giải pháp siêu đơn giản cho mega đáp ứng của tôi thả xuống. Điều này được dựa trên thuộc tính dữ liệu html5. Chỉ có 3 dòng! ;)

$('.button, .content').hover(function() { 
    $($(this).data('coupling')).toggle(); 
});​ 

http://jsfiddle.net/QrEuQ/