2009-09-02 6 views
1

Я пытаюсь использовать jquery и ccc cprint для выполнения простой задачи (так я думал), которая проиллюстрирована в приведенном ниже коде. В принципе, у меня есть список элементов, и я хочу иметь X в конце каждого элемента, чтобы элементы могли быть удалены, я также хотел бы, чтобы X появлялся только в том случае, если пользователь наводит указатель на элементы списка. Часть mouseover работает несколько, но когда я приближаюсь к X для щелчка, по какой-то причине она исчезает. Синтаксис css используется для позиционирования. Код выглядит следующим образом, он должен просто работать, если подключен к пустому HTML файл:проблема с mouseover и скрытие некоторых элементов

<head> 
    <style type="text/css"> 
    .delete{ 
     display:none; 
    } 
    .entry{ 
     list-style:none; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/63795c8bfe31cbbfad726f714bf8d22770adc7ad/blueprint/screen.css" type="text/css" media="screen, projection"> 
    <script type="text/javascript"> 
    $(function(){ 
     $('.entry').live("mouseover", function(){ 
      $(this).find('.delete').css({'display':'inline'}); 
     }).live('mouseout', function(){ 
      $(this).find('.delete').css({'display':'none'}); 
     }); 
    }); 
    </script> 
</head> 
<div id="list span-24 last"> 
<ul> 
    <li class="entry"><div class="span-22">Something some thing some thing some thing some thing</div><div class="span-2 last"><a class="delete">X</a></div></li> 
</ul> 
</div> 

ответ

2

span класса применяет float:left к элементу он применяется. В вашем случае, поскольку у вас есть span внутри вашего li, li не имеет высоты, он заполнен плавающими элементами.

Я не визг, когда дело доходит до пузыря javascript, но я предполагаю, что он работает вообще, что событие бурлит только тогда, когда вы перекатываетесь через span-22, и во-вторых, вы выходите из него, так как li не имеет высоты, вы никогда не сможете наброситься на свое удаление.

Короче говоря, вы могли бы либо дать высоту вашему li, либо применить чертеж .clearfix класс для всех li.

EDIT: Возможно, есть другие способы исправить это, но это первые, которые приходят на ум.

Надеюсь, это поможет.

+0

Точно. Назначьте правильный размер элементам и очистите плавающие элементы. У меня была аналогичная проблема с выпадающими меню - подменю открывалось, когда было перемещено на 1-й уровень li, но закрыто, когда я перешел на 2-й уровень. Все, что было, было то, что у 1-го уровня у меня не было ни одного размера. –