CSS - 顯示屬性無法使用img

我有一個「語音泡泡」。我使用div來構建內容。在那個div裏，我放了一個我用於尾巴的img。這2個頁面在頁面加載時隱藏。當點擊某個按鈕時，應該顯示這2個按鈕。不過只顯示內容（＃msg-loc）。 img保持隱藏狀態。我不明白。奇怪的是，如果我在默認情況下刪除隱藏的屬性，一切都正確顯示。顯示屬性不適用於img嗎？希望有人能幫忙。預先感謝您的回覆。乾杯。馬克。CSS - 顯示屬性無法使用img

我的HTML：

<div id="msg-loc" class="hidden"> 
    <img src="img/triangle.png" class="hidden triangle"/> 
</div>

我的JS：

$('#msg-loc').html('the value is incorrect').removeClass('hidden'); 
$('.triangle').removeClass('hidden');

我的CSS：

#msg-loc{ 
    width:300px; 
    text-align:center; 
    margin-top:8px; 
    background-color:pink;} 

.triangle{ 
    left:65px; 
    top:-13px; 
    position:relative;} 

.hidden{ 
    display:none;}

來源

2012-03-01 Marc

您正在用'數值不正確'替換圖像。

基於評論...更新的解決方案： http://jsfiddle.net/P7yhz/3/

HTML

<div id="msg-loc" class="hidden"> 
    <div class="triangle"></div> 
    <div class="message">The value is incorrect</div> 
</div> 
<a href="#">Reveal</a>

CSS

#msg-loc{ 
    width:300px; 
    text-align:center; 
    margin-top:8px; 
} 

.triangle { 
    background:url('http://www.mathsisfun.com/geometry/images/regular-triangle-sm.gif') no-repeat bottom center; 
    height: 40px; 
} 
.message {background:pink;} 

.hidden{ 
    display:none;}

$(document).ready(function() { 
    $('a').click(function() { 
     $('#msg-loc').toggleClass('hidden'); 
    });

}）;

來源

2012-03-01 13:29:13 isotrope

同位素你搖滾！簡單有效:)非常感謝... – Marc 2012-03-01 13:34:15

問題prepend（）每次點擊按鈕時都會增加。是否有前置的相反功能？ – Marc 2012-03-01 13:37:18

就我個人而言，我也會放下圖像並將其用作「錯誤」跨度或div的背景圖像。 – isotrope 2012-03-01 13:40:00

通過使用$('#msg-loc').html('the value is incorrect').removeClass('hidden');你徹底刪除＃MSG-LOC DIV裏面什麼。在它爲空之後，將其「隱藏」類刪除。

這是通過.html函數完成的。

解決方案將是。

var x = document.createTextNode("the value is incorrect"); 
$('#msg-loc').append(x); 
$('#msg-loc').removeClass('hidden'); 
$('.triangle').removeClass('hidden');

來源

2012-03-01 13:24:58

這是你的代碼

<div id="msg-loc" class="hidden"> 
    <img src="Icons/Apps_icons/eye.png" id="yo" class="hidden triangle"/> 
</div> 
<a href="#" id="t">Click Me</a>

的HTML一部分。這是JavaScript部分

$(document).ready(function(){ 
    $("a#t").click(function(event){ 
      event.preventDefault(); 
      $("div#msg-loc").removeClass("hidden"); 
      $("img#yo").removeClass("hidden"); 
      }); 
     });

我只是增加了一個「ID」到「IMG」標籤和錨標籤提供要調用的函數。我認爲你的CSS是正確的。

來源

2012-03-01 14:12:33 Prateek

你好Prateek。謝謝您的幫助。我選擇由Isotrope提出的解決方案... – Marc 2012-03-02 09:00:49

@Mark：沒問題的朋友我也更喜歡這個解決方案，但我只是建議替代.......謝謝你的迴應。 – Prateek 2012-03-05 12:08:34

CSS - 顯示屬性無法使用img

回答

相關問題