0

[编辑]问题现已解决

我在另一个包含可编辑内容的 div 中有一个编辑（带有图像的 div）按钮，我的计划是隐藏按钮，直到光标悬停在内容 div 上。

我的问题是，如果我display:none;在 CSS 中使用，然后使用 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>
4

1 回答 1

0

而不是使用可见性；您可以使用

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

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

于 2013-03-22T10:48:29.063 回答