CSS 3 PIE：懸停不起作用

IE不顯示圓角。它可以工作，如果我拿出:hover。CSS 3 PIE：懸停不起作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      .tooltip { 
       position:absolute; 
       text-decoration: none; 
       display:inline-block; 
      } 
      .tooltip span { 
       margin-left:-999em;    
      } 
      .tooltip:hover span { 
       background-color: black; 
       border-radius: 5px; 
       -moz-border-radius: 5px; 
       -webkit-border-radius: 5px; 
       color: #fff; 
       display: inline-block; 
       position: relative; 
       left: 30px; 
       padding: 10px; 
       top:0px; 
       z-index:1; 
       behavior:url(PIE.htc); 
       margin-left:0; 
      } 
     </style> 
    </head> 
    <body> 
     <label>This is a label 
      <a href="#" class="tooltip"> 
       <img src="img/help.jpg" style="border:1px solid black;width:15px;height:15px;position:absolute;left:5px;top:5px;"/> 
       <span>This is a test</span> 
      </a> 
     </label> 
    </body> 
</html>

來源

2012-11-27 techlead

嘗試運用行爲元素，而不：hover僞類：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      .tooltip { 
       position:absolute; 
       text-decoration: none; 
       display:inline-block; 
      } 
      .tooltip span { 
       margin-left:-999em; 
       behavior:url(PIE.htc);   
      } 
      .tooltip:hover span { 
       background-color: black; 
       border-radius: 5px; 
       -moz-border-radius: 5px; 
       -webkit-border-radius: 5px; 
       color: #fff; 
       display: inline-block; 
       position: relative; 
       left: 30px; 
       padding: 10px; 
       top:0px; 
       z-index:1; 
       margin-left:0; 
      } 
     </style> 
    </head> 
    <body> 
     <label>This is a label 
      <a href="#" class="tooltip"> 
       <img src="img/help.jpg" style="border:1px solid black;width:15px;height:15px;position:absolute;left:5px;top:5px;"/> 
       <span>This is a test</span> 
      </a> 
     </label> 
    </body> 
</html>

你shouldn'd藏匿切緣陰性的元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      .tooltip { 
       position:absolute; 
       text-decoration: none; 
       display:inline-block; 
      } 
      .tooltip span { 
       left: 30px; 
       top:0px; 
       background-color: black; 
       color: #fff; 
       padding: 10px; 
       display: none; 
       border-radius: 5px; 
       -moz-border-radius: 5px; 
       -webkit-border-radius: 5px; 
       behavior:url(PIE.htc);  
       z-index:1; 
       position: relative; 
      } 
      .tooltip:hover span { 
       display: inline-block; 
      } 
     </style> 
    </head> 
    <body> 
     <label>This is a label 
      <a href="#" class="tooltip"> 
       <img src="img/help.jpg" style="border:1px solid black;width:15px;height:15px;position:absolute;left:5px;top:5px;"/> 
       <span>This is a test</span> 
      </a> 
     </label> 
    </body> 
</html>

來源

2012-12-21 13:41:27 luksak

你必須設置跨度來監視懸停元素的行爲變化（在你的情況下，'tooltip'元素）。設置跨度加入觀看「提示」行爲的變化：

.tooltip span { 
    -pie-watch-ancestors: 1; 
}

「1」代表與您的圓角邊框元素祖先的水平。

此處瞭解詳情： http://css3pie.com/documentation/supported-css3-features/#pie-watch-ancestors

來源

2013-06-25 14:48:02

是的，你可以做到這一點，但你必須放在一個樣式規則的行爲聲明，不包括：懸停選擇。您可以將其餘的樣式保留在：hover塊中。 關注此IE at hover problem

試試把你的行爲：url（PIE.htc）; .tooltip {}中的。它爲我工作。

來源

2014-05-14 08:47:06 BigBear

更改代碼格式 – SGG

CSS 3 PIE：懸停不起作用

回答

相關問題