背景圖像在懸停/鼠標懸停時消失，並且菜單在IE中不起作用

Question

我有5個不同的背景，當鼠標懸停菜單鏈接如下時，背景會從一個變為另一個：

我希望該網站在所有瀏覽器中都能正常運行，但結果卻截然不同。 在firefox中，背景圖像消失並重新出現在每個菜單鏈接上，但是只有當我第一次用光標越過鏈接時，其他時間才能正常工作。 在chrome中，背景消失並在每次鼠標停留時重新出現。 在IE中，momooverover根本不起作用，菜單也不起作用。

因此，我想請您幫助我解決此問題，包括消失和IE中的菜單。 我發現這種消失和重新出現是由於圖像加載緩慢而引起的，但是我不知道如何修復我的代碼以解決此問題。

我只是用jsFiddle編寫了代碼，但菜單也無法正常運行。 而且我注意到，當我將窗口縮小到小於div的大小時，整個事情開始變形。 我以為我已經解決了，但是似乎我也不知道該如何解決。 您可以在這里看到我的代碼：

我在jsFiddle中的代碼

CSS

body
{
    background-image:url(Slike/Ozadja/Osnova.png);
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:local;
    background-color: #FFFAF0;
    background-size:794px;
}

#layoutWidth div
{
    width:628px;
    margin:auto;
    display:table;
    overflow:hidden;
}

div .header
{
    height:85px;
    text-align:center;
    display:table-row;
}

div .menu 
{
height:173px;
display:table-row;
}

#ddm
{   margin-top: 30px;
    padding: 0;
    z-index: 30}

#ddm li
{   margin-left:12px;
    margin-top:10px;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 100% arial}

#ddm li a
{   display: block;
    margin: 0 6px 0 0;
    padding: 4px 4px;
    width: 130px;
    background: transperent;
    color: #FFF;
    text-align: center;
    text-decoration: none}

#ddm li a:hover
{   background: transparent;
    color: #C0C0C0;
    }

#ddm div
{   position: absolute;
    visibility: hidden;
    margin-top:10px;
    padding: 0;
    background: transparent;
    }


    #ddm  div a
    {   position: static;
        display: block;
        margin-left: -16px;
        padding: 5px 10px;
        width: 150px;
        white-space: normal;
        text-align: center;
        text-decoration: none;
        background: transperent;
        color: #000;
        font: bold 11px arial;
        }

    #ddm div a:hover
    {   background: transparent;
        color: #696969}

div .body
{   
    height:650px;
    text-align: left;
    display:table-row;
}

div .footer 
{   

    display:table-row;
}

HTML

<html>
<head>
<title>Drop-Down Menu</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="Content-Type"
    content="text/html;charset=UTF-16">
    <link rel="stylesheet" type="text/css" href="Stil.css">

<!-- dd menu -->
<script type="text/javascript">
<!--

var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;
var myImage         = {};
myImage.m1 = 'Prvi_predal.png';
myImage.m2 = 'Drugi_predal.png';
myImage.m3 = 'Tretji_predal.png';
myImage.m4 = 'Cetrti_predal.png';

function mopen(id)
{   
    mcancelclosetime();

    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    document.body.style.backgroundImage = 'url(Slike/Ozadja/'+myImage[id]+')';
}


function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    document.body.style.backgroundImage = 'url(Slike/Ozadja/Osnova.png)'
}

function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

document.onclick = mclose; 

// -->

</script>

</head>
<body>

<div id="layoutWidth">
<div class="header">
<a href="Domov.html">
<img src="Slike/Logo/Logo.png" alt="Mankajoč logotip" width="279" height="80"></a>
</div>



<div class="menu">
<ul id="ddm">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Obdelava lesa</a>
        <div id="m1" class="prvi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Izdelki iz iverala</a>
        <a href="#">Izdelki iz masive</a>
        <a href="#">Obnova pohištva</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Talne obloge</a>
        <div id="m2" class="drugi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Laminat</a>
        <a href="#">Parket</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Ostale storitve</a>
        <div id="m3" class="tretji" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Uporaba mavčnih plošč</a>
        <a href="#">Lažja zidarska dela</a>
        <a href="#">Fotografiranje dogodkov</a>
        <a href="#">Video zajem dogodkov</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Informacije</a>
        <div id="m4" class="cetrti" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">O podjetju</a>
        <a href="#">Kontakt</a>
        <a href="#">Kje se nahajamo</a>
        <a href="#">Galerija</a>
        </div>
    </li>

</ul>
<div style="clear:both"></div>

<div style="clear:both"></div>
</div>

<div class="body">
<p>Brez pomena.</p>
<br />
<p> Tole tudi! </p>
</div>

<div class="footer">
Brez pomena.
</div>
</div>

</body>
</html>

Answer 1

對於閃爍的背景圖像以及要從JS使用的其他圖像，您需要預加載，否則它將閃爍。 如何預加載圖像？ 單擊此處（閃爍，因為加載頁面時未顯示該圖像。因此，您要使用的圖像不在用戶手中。瀏覽器下載該圖像，但是直到那時，沒有圖像它可以顯示給他/她。這就是原因。）

IE默認情況下會阻止JS（例如IE 10）。 您需要啟用它。 我在底部有一個警告氣泡，說，我已經擋住了一切……之類的東西。 您無法通過腳本啟用此功能。 只有您可以為用戶創建警告消息，如果啟用了JS，則將其刪除。

另外，如果您從左上角的第二個下拉列表中選擇“ no warp-in <head> ”選項，則在jsFiddle中它將起作用。 之后，您需要單擊頂部的運行。

背景圖像在懸停/鼠標懸停時消失，並且菜單在IE中不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2013-09-07 21:45:34

背景圖像在懸停/鼠標懸停時消失，並且菜單在IE中不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2013-09-07 21:45:34

解決方案1
1 已采納 2013-09-07 21:45:34