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 に答える