div可见在Firefox中不工作，不显示

[编辑]问题内部图像现在包含可编辑内容的另一个专区内解决div可见在Firefox中不工作，不显示

我有一个编辑器（DIV与图像）按钮，我的计划是有按钮隐藏，直到光标悬停在内容div上。

我的问题是，如果我在CSS中使用display:none;，然后使用JavaScript函数再次显示和隐藏divButton，则图像不会在FireFox中显示。

如果我使用element.style.visibility = "visible";，那么FireFox根本不会显示div。

任何投入将是非常赞赏谢谢:)

相关代码：

HTML

<div id="c1ContentSrc" class="widgetContent editable"> 
    @Html.Raw(HttpUtility.HtmlDecode(row.column1Content)) 
    <div id="c1ContentEdit" class="cmsEditButton"><img src="../../Content/images/cmsEdit.png" alt="edit" /></div> 
</div>

CSS

.cmsEditButton{ 
    display:none; 
    position:absolute; 
    top:37px; 
    right:8px; 
    width:16px; 
    height:16px; 
}

备用CSS

.cmsEditButton{ 
    visibility:hidden; 
    position:absolute; 
    top:37px; 
    right:8px; 
    width:16px; 
    height:16px; 
}

javascript函数

function showEditButton(id, editId) { 
    if(editId.style.display == "none"){ 
     if (!id.isContentEditable) { 
      editId.style.display = "block"; 
     } 
    }else{ 
     editId.style.display = "none"; 
    } 
}

替代JavaScript代码

function showEditButton(id, editId) { 
    if (editId.style.visibility == "hidden" || editId.style.visibility == "") { 
     if (!id.isContentEditable) { 
      editId.style.visibility = "visible"; 
     } 
    }else{ 
     editId.style.visibility = "hidden"; 
    } 
}

函数调用

document.getElementById("c1ContentSrc").addEventListener("mouseover", function() { 
     showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit")) 
    }, false); 

document.getElementById("c1ContentSrc").addEventListener("mouseout", function() { 
     showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit")) 
    }, false);

问题已经用下列变化现在解决，移动剃刀输出上述图像，它似乎是干扰，也删除了不必要的div

<div id="c1ContentSrc" class="widgetContent editable"> 
    <img id="c1ContentEdit" class="cmsEditButton" title="edit" src="../../Content/images/cmsEdit.png" alt="edit" /> 
    @Html.Raw(HttpUtility.HtmlDecode(row.column1Content)) 
</div>

来源

2013-03-22 Dreamscourge

这里重现该问题：http://jsfiddle.net – 2013-03-22 10:43:38

有你得到的js，调用函数 – Pete 2013-03-22 10:50:01

函数调用添加为请求，以为我已经把它们放在^ _^ – Dreamscourge 2013-03-22 11:06:46

而不是使用可见性;您可以使用可视性如果您使用的显示器使用

display:none; 
display:block; 
display:none !important; 
style="display:none;" //inline css

避免的，你可以与他们同时播放和实施正确的代码...

来源

2013-03-22 10:48:29 SaurabhLP

我使用display：none;最初这是什么导致了问题，能见度是我试图没有成功，以避免图像不显示问题。 – Dreamscourge 2013-03-22 11:08:49

也许图像的网址不正确... – SaurabhLP 2013-03-22 11:13:35

如果我删除显示：无;从CSS图像显示 – Dreamscourge 2013-03-22 11:15:58

div可见在Firefox中不工作，不显示

回答

相关问题