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

回答

相关问题