維護顯示：鼠標懸停上的元素上的阻擋

<div id='main'> 
    <fieldset> 
     <legend>Feed</legend> 
     <div class='user_show_finds'> 
     <span> 
      <h3> 
      product name 
      </h3> 
      <p> 
      <a href="/products/1">Thorpe Obazee</a> 

      </p> 
     </span> 
     <img alt="1331699_summer_shoes" src="/photos/1/1331699_summer.jpg?1299" /> 
     </div> 
    </div>

我目前在我的html上有上述內容。維護顯示：鼠標懸停上的元素上的阻擋

$('#main fieldset div.user_show_finds img').hover(
    function(){ 
     $(this).parent('div').find('span').toggle(); 
    }, 
    function(){ 
     $(this).parent('div').find('span').toggle(); 
    } 
);

我在上面我的JavaScript文件中。

它的工作原理。但問題在於，當我將鼠標懸停在跨度上（懸停在圖像上時可見的那個）時，跨度將返回到display:none。我知道它會因爲它嵌入另一個元素而失去它。

我怎麼會不會失去display:block？

UPDATE：

$('#main fieldset div.user_show_finds span').hover(
    function() { 
     $(this).css({'display':'block'}); 
    }, 
    function(){} 
);

這似乎解決它，但有一個更清潔的方式？

來源

2011-03-10 Thorpe Obazee

我並沒有完全理解，但是這不是因爲SPAN是默認的內聯元素（display：inline）嗎？ – 2011-03-10 11:02:49

是否嘗試在'span'上設置默認樣式 – diEcho 2011-03-10 11:03:37

在我的css中更改了span以阻止 – 2011-03-10 11:05:39

-1

通過定義你想要的語義來代替。

也許你需要它，以便用戶應該將鼠標懸停在圖像上以查看範圍，然後當用戶進入並離開垃圾郵件時，它將消失。

也許你想要，如果光標已經離開圖像和還沒有移動到跨度（這要求他們正在觸摸，偶然），跨度消失。你也可以通過在span上設置事件處理程序來實現這一點，並且保留一些跟蹤變量來查看哪些處理程序已經觸發，從而確定鼠標光標的位置。然後根據需要建立你的邏輯。

來源

2011-03-10 11:01:18

是的，我已經完成了該操作，正如我在更新的答案中顯示的那樣。我需要知道的是，在第一個功能中是否有更乾淨的方法來實現這一點。 – 2011-03-10 11:06:57

@Thorpe：不;目前你只有一個圖像事件處理程序。你也需要一個。 TBH您在編輯中的修復對我來說看起來還可以。 – 2011-03-10 11:08:46

維護顯示：鼠標懸停上的元素上的阻擋

回答

相關問題