Question

[edit]问题现在解决了

我在包含可编辑内容的另一个div中有一个编辑（带图像的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>

Answer 1

而不是使用可见性;你可以用

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

如果您使用的是显示器，请避免使用可见性。您可以同时使用它们并实施正确的代码......

Div Visibility无法在Firefox中运行，内部图像无法显示

1 个答案: