自動隱藏菜單

這是完整的代碼，作爲小提琴（http://jsfiddle.net/pbb9cc9f/7/）菜單是工作，但我不能落實到我的HTML文件。我做錯了什麼？預加載的JavaScript鏈接是否錯誤？循環幻燈片與菜單搞亂了嗎？謝謝！

<!DOCTYPE html> 
<html> 

<title>CHRIS RHODES</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 

<script type="text/javascript"> 
$('#slide').cycle({ 
    fx:  'none', 
    timeout: 0, 
    next: '#nex', 
    prev: '#pre' 
}); 

$(document.documentElement).keyup(function (e) { 
    if (e.keyCode == 39) 
    {   
     $('#slide').cycle('next'); 
    } 

    if (e.keyCode == 37) 
    { 
     $('#slide').cycle('prev'); 
    } 

}); 
</script> 

<script type="text/javascript"> 
(function() { 

    var time = 3000, 
    timer; 

    clearTimeout(timer); 
    $('.target').stop(true).css('opacity', 1).show().fadeOut(8000); 

    function handlerIn() { 
    clearTimeout(timer); 
    $('.target').stop(true).css('opacity', 1).show(); 
    } 

    function handlerOut() { 
    timer = setTimeout(function() { 
     $('.target').fadeOut(8000); 
    }, time); 
    } 

    $(".link, .target").hover(handlerIn, handlerOut); 

}()); 
</script> 

<head> 

<style type="text/css"> 

body { 
    font-family: Arial; 
    text-decoration: none; 
    color: black; 
    font-size: 8pt; 
    letter-spacing: 0.1em; 
} 

a { 
    font-family: Arial; 
    text-decoration: none; 
    color: black; 
    font-size: 8pt; 
    letter-spacing: 0.1em; 
} 

.target { 
    display: none; 
    left: 20px; 
    top: 20px; 
    width: 98px; 
    height: 60px; 
    position: absolute; 
    z-index: 99999; 
    background: red; 
} 

.link { 
    left: 0px; 
    top: 0px; 
    width: 138px; 
    height: 100px; 
    position: absolute; 
    z-index: 9999; 
    background: blue; 
} 

#slide { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#pre { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 50%; 
    height: 100%; 
    background-color: transparent; 
    cursor: w-resize; 
    z-index: 999; 
} 

#nex { 
    position: fixed; 
    right: 0px; 
    top: 0px; 
    width: 50%; 
    height: 100%; 
    background-color: transparent; 
    cursor: e-resize; 
    z-index: 999; 
} 

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

.Absolute-Center.is-Resizable { 
    max-width: 80%; 
    max-height: 90%; 
    resize: both; 
    overflow: auto; 
} 

</style> 

</head> 

<div class="link"></div> 

<div class="target"> 
CHRIS RHODES<br><br> 
<a href="http://www.chrisjrhodes.co.uk">Comissions</a><br> 
<a href="http://www.chrisjrhodes.co.uk/editorial">Editorial</a><br> 
<a href="http://www.chrisjrhodes.co.uk/contact">Contact</a><br> 
</div> 

<div id="pre"></div> 
<div id="nex"></div> 

<ul id="slide"> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/01-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/02-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/03-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/04-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/05-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/06-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/07-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/08-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/09-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/10-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/11-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/12-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/13-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/14-800x800.jpg" class="Absolute-Center is-Resizable"/> 
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/15-800x800.jpg" class="Absolute-Center is-Resizable"/> 
</ul> 

</body> 
</html>

來源

2016-09-04 Phil K

你不能這樣做。你的權利，你不能懸停一個不在那裏的元素。你需要一些總是在頁面上的元素。另外，用戶如何知道在哪裏懸停而沒有任何視覺線索？ – Liam

該菜單應該在訪問該頁面時可見，然後「隱形」。當他們想要使用它時，人們可以將其懸停在它上面。 –

所以你希望它是透明的？所以不是消失，而是成爲「看透」？鑑於你現在發佈的附加代碼**正是**是問題所在？ – Liam

在這種情況下，您需要另一個可見元素作爲懸停源。它可以是其他可見的東西，或者只是在用戶界面上留下幾個像素寬的線條，或者可以爲此創建一些特殊的元素/圖標。這應該可以在桌面或移動設備上運行。

來源

2016-09-04 17:22:32

我不認爲另一個元素會做，我將不得不重新開始代碼，所以菜單是不可見的。這很簡單，在簡單的html中有三個鏈接，我不介意它們只要保持透明就可以，只要他們停留在它們上面，然後再回來。 –

嘗試改變visibility

<script type="text/javascript"> 
    setTimeout(function() { 
    $('.menu').css("visibility", "hidden"); 
    }, 5000); 
</script>

visibility: hidden只隱藏你的視覺元素。但它會在那裏。不像display: none;

來源

2016-09-04 17:23:10

謝謝，但這似乎並不奏效，但據我所知，它仍然消失。 –

你能提供一個工作小提琴嗎？ –

我把整個網站的代碼放入我的問題。 –

-1

這是我的js代碼，它執行你正在描述的內容。讓我知道如果你喜歡css和html部分，你可以玩弄它並且設計你自己的風格。

function expand(s){ 
    var td = s; 
    var d = td.getElementsByTagName("div").item(0); 
    td.classname = "menuHover"; 
    d.className = "menuHover"; 
} 

function collapse(s){ 
    var td = s; 
    var d = td.getElementsByTagName("div").item(0); 
    td.className = "menuNormal"; 
    d.className = "menuNormal"; 
}

來源

2016-09-04 17:28:49

這並不能解決如果菜單不可見的情況下如何觸發事件的問題。我認爲這是真正的問題。 –

自動隱藏菜單

回答

相關問題