正確顯示CSS'popup'

我在使用CSS顯示彈出div時遇到了一些麻煩。這個問題用一個例子來解釋。看看下面的HTML：正確顯示CSS'popup'

<html> 
    <head> 
     <style type"text/css"> 
      #popup { 
       color: #fff; 
       background: #8c0000 
      } 

      #form { 
       background: #ccc; 
       color: #000; 
       position: absolute; 
       display: none; 
      } 

      #popup:hover > #form { 
       display: block; 
      } 
     </style> 
    </head> 
    <body> 
     <span id="popup"> 
      Popup 
      <div id="form"> 
       <form> 
        <label>Text Field</label> 
        <input type="text" /> 
        <label>Select Field</label> 
        <select> 
         <option value="opt1">val1</option> 
         <option value="opt2">val2</option> 
        </select> 
       </form> 
      </div> 
     </span> 
    </body> 
</html>

這包括一個單跨元素，包含窗體一個隱藏的div元素。當鼠標懸停span元素時，顯示div。問題是，當我要在下拉框中選擇一個選項時，div會消失，就好像它失去了焦點。結果是我只能使用鍵盤更改下拉值。

我的問題是：我該如何解決這個問題？任何關於這個問題的線索都表示讚賞。

來源

2010-09-24 Thiago de Arruda

我相信你可能在這裏運氣不好，因爲<option>元素的渲染依賴於瀏覽器/操作系統/平臺，而不是CSS盒子模型的一部分。使用JavaScript（和jQuery），這是非常簡單的。我爲表單添加了「完成」按鈕，因爲這可能是選擇何時隱藏表單的更好解決方案。否則，用戶將必須非常小心，不要移動鼠標指針選擇下拉菜單外，還是一切都將消失（如果我理解正確你的要求。）

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style type"text/css"> 
      #popup { 
       color: #fff; 
       background: #8c0000 
      } 

      #form { 
       background: #ccc; 
       color: #000; 
       position: absolute; 
       display: none; 
      } 
     </style> 

     <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script> 
     <script language="javascript"> 
     function showForm() { 
      $("#form").show(); 
     } 
     function hideForm() { 
      $("#form").hide(); 
     } 
     </script> 
    </head> 
    <body> 
     <span id="popup" onmouseover="showForm()"> 
      Popup 
      <div id="form"> 
       <form> 
        <label>Text Field</label> 
        <input type="text" /> 
        <label>Select Field</label> 
        <select> 
         <option value="opt1">val1</option> 
         <option value="opt2">val2</option> 
        </select> 
        <input type="button" value="Done" onclick="hideForm()" /> 
       </form> 
      </div> 
     </span> 
    </body> 
</html>

來源

2010-09-24 18:30:44

我猜javascript完全可以避免，謝謝。 – 2010-09-24 18:35:54

我不知道究竟是什麼問題，但下面的CSS在Chrome 6.0.472.62和Firefox 3.6.10工作在Ubuntu 10.04：

#popup { 
    position: relative; 
} 
#form { 
    width: 12em; 
    display: none; 
} 
#popup:hover #form { 
    clear: both; 
    margin: 0; 
    display: block; 
    position: absolute; 
    top: 1em; 
    left: 0; 
} 
#popup form select:focus, 
#popup form select:hover { 
    display: block; 
}

演示在：jsbin

這是值得改變#popup爲div，（我想我）早些時候評論。

來源

2010-09-24 18:03:25

這並不在IE8中正常工作。 .. – 2010-09-24 18:16:01

@Christian：有兩件事要提出建議：首先，嘗試我編輯的答案（最初我省略了看你'問題的選擇'部分，對不起），第二，你使用的文檔類型是什麼？另外：*無效（x）html *將始終導致問題。你的'＃popup' **需要**成爲'div'，而不是'span'。 – 2010-09-24 18:27:05

仍然無法正常工作（嘗試使用firefox 3.6.x）。最初我曾嘗試使用選擇器來匹配div內的元素，但他們根本無法使用。不管怎麼說，還是要謝謝你。 – 2010-09-24 18:42:12

你只顯示懸停彈出，所以當鼠標離開你的彈出窗口，它是隱藏的，

你要的onmouseover span元素表現出來，而隱藏在使用點擊了其他位置上該頁面（除彈出以外），或者當他彈出關閉選項時。

我不認爲你可以用純CSS做到這一點。你需要一些JavaScript。

來源

2010-09-24 18:11:23 Nivas

'＃form'包含*在'＃popup'範圍內，所以'：hover'應該仍然適用於'＃popup'，無論如何。它確實在Chrome 6.0.472.62和Firefox 3.6.10中有效。 – 2010-09-24 18:15:46

正確顯示CSS'popup'

回答

相關問題