IE chọn vấn đề với hover

Một người bạn và bản thân tôi đang cố gắng giải quyết sự cố IE (7/8). Chúng tôi đã xây dựng một ví dụ kinh điển ở đây:IE chọn vấn đề với hover

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

Sử dụng một menu CSS, chúng tôi muốn có chọn trong họ. Tuy nhiên, trong IE, menu sẽ biến mất khi bạn tương tác với hộp chọn. Chúng tôi tin rằng điều này liên quan đến lỗi trong cách chọn ảnh hưởng đến sự kiện.

Có một cách giải quyết? Ít nhất với CSS tinh khiết hoặc DOM hack?

Nguồn

2010-09-13 MathGladiator

phiên bản IE nào bạn đang nói đến? –

chủ yếu là 7 và 8 (* chỉnh sửa *) – MathGladiator

Tôi thấy không có sự khác biệt giữa IE7 và Chrome –

Tôi không nghĩ rằng có một cách CSS tinh khiết xung quanh việc này. Điều này là do một lỗi rất phổ biến đối với cách IE xử lý các sự kiện trên các phần tử được chọn.

Bạn tuy nhiên có thể làm việc xung quanh nó với Javascript:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.nav_element a').mouseover(function() { 
      $('.submenu').hide(); 
      $(this).parent().find('.submenu').show(); 
     }); 

     $('.submenu').mouseover(function() { 
      $(this).show(); 
     }); 

     $('.submenu').mouseout(function (e) { 
      // Do not close if going over to a select element 
      if (e.target.tagName.toLowerCase() == 'select') return; 
      $(this).hide(); 
     }); 

    });  
</script>

Đoạn mã trên sử dụng jQuery.

Nguồn

2010-09-22 00:45:16 vassilis

Dưới đây là một cách để canh chọn hành vi trong IE7/8, nhưng nó không khắc phục vấn đề

Thay đổi DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Thêm script

<script> 

    function ddlOut(e) { 
     setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000) 
    } 

</script>

Thêm css

#nav .over div.submenu 
    { 
     display: block; 
    } 

    #nav .nav_element{ 
     behavior: expression(
      this.onmouseover = new Function("this.className += ' over'"), 
      this.onmouseout = new Function("ddlOut(this)"), 
      this.style.behavior = null 
     ); 
    }

Nó sẽ hoạt động tốt hơn ít nhất nhưng tất nhiên là không hoàn hảo.

Lời khuyên của tôi là thay đổi điều khiển chọn thành tương đương html. Tôi sử dụng OboutDropDown có chế độ xem đẹp. Có nhiều triển khai mà bạn có thể cần.

Nguồn

2010-09-24 08:03:35

Trước tiên, bạn cần phải mở rộng: bề mặt di chuột bên dưới trình đơn của bạn.
Vì vậy, trong css, hãy thêm width:310px;height:220px vào #nav .nav_element a.
(còn thêm một lớp hoặc một id trên div thứ hai kiểu với top:220px)

Bây giờ bạn chỉ cần để mô phỏng một mousedown kích hoạt khi bạn nhấp chuột trên chọn mà sẽ tạm dừng khi lựa chọn giữa các tùy chọn được thực hiện - bạn có thể thực hiện phần cuối cùng nếu bạn kiểm tra trạng thái của trạng thái chọn lựa sẽ dừng hoạt động của mousedown onfocus.

Nguồn

2010-09-26 03:11:20 Knu

IE chọn vấn đề với hover

Trả lời

Các vấn đề liên quan