鼠标悬停后div变化，Div不显示

嗯，我开始写这个网页，我遇到了几个问题，我只是不能找到答案。鼠标悬停后div变化，Div不显示

我的代码的基本思路是：

打开菜单，当鼠标在“探索网页”
菜单“链接”高亮鼠标悬停
当菜单项，用户点击，菜单将移动到页面顶部，并且“链接”保持高亮显示状态，直到用户单击不同的链接。
当菜单移动到顶部时，会在下面打开一个div，显示该部分的内容。

我有两个主要问题。首先，每当我点击菜单项时，它不会保持突出显示（数字3）。其次，在点击（数字4）后，div不会在菜单下面打开。对于这些问题的深入了解，我将不胜感激。

我包括了我的所有代码，因为我相信这些代码都与我的问题有关。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body 
{ 
    background-color: #000000; 
} 
#container 
{ 
    z-index: -1; 
    background: #000000; 
    width: 900px; 
    height: 900px; 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    margin-left: -450px; 
} 
#explore 
{ 
    z-index: 1; 
    background: #000000; 
    width: 300px; 
    height: 150px; 
    position: absolute; 
    top: 41.666%; 
    left: 33.333%; 
    opacity: 1; 
} 

#explore-text 
{ 
    z-index: 1; 
    color: #eb56bd; 
    font-size: 50px; 
    font-family: sans-serif; 
    font-weight: bold; 
    text-align: center; 
    position: absolute; 
    top: 5px; 
    left: 0%; 
    opacity: 1; 
} 
.title 
{ 
    z-index: 2; 
    width: 300px; 
    height: 150px; 
    text-align: center; 
    font-size: 60px; 
    font-family: sans-serif; 
    font-weight: bold; 
    color: #000000; 
    display: none; 
} 
#news 
{ 
    background: #eb56bd; 
    position: absolute; 
    top: 41.666%; 
    left: 33.333%; 
} 
#about 
{ 
    background: #eb56bd; 
    position: absolute; 
    top: 41.666%; 
    left: 0%; 
} 
#events 
{ 
    background: #eb56bd; 
    position: absolute; 
    top: 41.666%; 
    left: 66.666%; 
} 
.content 
{ 
    z-index: 0; 
    background: #b0408d; 
    width: 900px; 
    position: absolute; 
    top: 21.666%; 
    left: 0px; 
    height : 900; 
} 
#news-content 
{ 
    display: none; 
} 
#about-content 
{ 
    display: none; 
} 
#events-content 
{ 
    display: none; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="explore" onmouseover="overExplore()" onmouseout="outExplore()"> 
<div id="explore-text">Explore Webpage</div> 
</div> 
<div id="news" class="title" onmouseover="overTitle(news)" onmouseout="outTitle(news)" onclick="titleClick(news)">news</div> 
<div id="about" class="title" onmouseover="overTitle(about)" onmouseout="outTitle(about)" onclick="titleClick(about)">about</div> 
<div id="events" class="title" onmouseover="overTitle(events)" onmouseout="outTitle(events)" onclick="titleClick(events)">events</div> 
<div id="news-content" class="content"> 

</div> 
<div id="about-content" class="content"> 

</div> 
<div id="events-content" class="content"> 

</div> 
</div> 
<script> 
var titleClicked = false; 
var isClicked; 
var newsContent = document.getElementById('news-content'); 
var aboutContent = document.getElementById('about-content'); 
var eventsContent = document.getElementById('events-content'); 
var title = document.getElementsByTagName('title'); 
var news = document.getElementById('news'); 
var about = document.getElementById('about'); 
var events = document.getElementById('events'); 
var explore = document.getElementById('explore'); 
var exploreText = document.getElementById('explore-text'); 
function overExplore() { 
    explore.style.width="900px"; 
    explore.style.left="0%"; 
    explore.style.background="#eb56bd"; 
    explore.style.cursor="pointer"; 
    explore.style.cursor="hand"; 
    explore.style.opacity="0"; 
    news.style.display="block"; 
    about.style.display="block"; 
    events.style.display="block"; 
} 
function outExplore() { 
    explore.style.width="300px"; 
    explore.style.left="33.333%"; 
    explore.style.background="#000000"; 
    exploreText.style.left="0%"; 
    exploreText.style.top="5px"; 
    explore.style.opacity="1"; 
    news.style.display="none"; 
    about.style.display="none"; 
    events.style.display="none"; 
} 

function overTitle(div) { 
    if (div!= isClicked) { 
     div.style.background="#b0408d"; 
    } 
    if (titleClicked == false) { 
    div.style.display="block"; 
    news.style.display="block"; 
    about.style.display="block"; 
    events.style.display="block"; 
    } 
    explore.style.cursor="pointer"; 
    explore.style.cursor="hand"; 
} 
function outTitle(div) { 
    if (div!= isClicked) { 
     div.style.background="#eb56bd"; 
    } 
    if (titleClicked == false) { 
     div.style.display="none"; 
     news.style.display="none"; 
     about.style.display="none"; 
     events.style.display="none"; 
    } 
} 
function titleClick(div) { 
    div.style.background="#b0408d"; 
    var isClicked = div; 

    if (div == news) 
    { 
     about.style.background="#eb56bd"; 
     events.style.background="#eb56bd"; 
     newsContent.style.display="block"; 
     aboutContent.style.display="none"; 
     eventsContent.style.display="none"; 
    } 
    else if (div == about) 
    { 
     news.style.background="#eb56bd"; 
     events.style.background="#eb56bd"; 
     newsContent.style.display="none"; 
     aboutContent.style.display="block"; 
     eventsContent.style.display="none"; 

    } 
    else 
    { 
     news.style.background="#eb56bd"; 
     about.style.background="#eb56bd"; 
     newsContent.style.display="none"; 
     aboutContent.style.display="none"; 
     eventsContent.style.display="block"; 
    } 
    explore.style.top="5%"; 
    news.style.top="5%"; 
    about.style.top="5%"; 
    events.style.top="5%"; 
    titleClicked=true; 
} 
</script>  
</body> 
</html>

非常感谢您的帮助。

第二个问题：如何防止指针指向我的菜单中的文本时指针发生变化？

再次感谢！

来源

2013-11-10 Nathan J

我从来没有设法让伪类（如:hover）以您想要的方式行事。如果你可以使用jQuery，您可以添加一个点击功能菜单类：

$('.title').click(function() { 
$('.title').css({'background':'#eb56bd'}); 
$(this).css({'background':'#b0408d'}); 
});

首先，你将所有背景的非点击的颜色，然后应用高亮颜色所点击的项目。这确保以前点击的项目在您点击另一个项目时删除了高亮显示。

JSFiddle

来源

2013-11-10 08:02:11 sideroxylon

您应该使用CSS类风格你的菜单链接：

.selected{background:rgb(176, 64, 141);}

当单击菜单链接，那么你所选择的类适用于该菜单链接

function titleClick(div) { 
    //div.style.background="#b0408d"; 
    div.className='selected'; 
    var isClicked = div;

按照你将需要清除其他菜单链接中的“选定”类，以便不再选择它们，例如：

about.className=""; 
events.className="";

而不是使用鼠标悬停和鼠标移开风格你的菜单链接，使用CSS：悬停，而不是：

#news:hover{ 
    background:"#eb56bd"; 
}

至于股利不显示，我猜这是因为申报单是空的。我用一些随机文本填充它，它确实显示。

来源

2013-11-10 04:38:54 liu3hao

谢谢你，你对div的想法是正确的。但是，使用该类没有让标题链接在点击后突出显示。你还有其他建议吗？如果这有帮助，我可以编辑我的问题以包含更改后的代码。 –

鼠标悬停后div变化，Div不显示

回答

相关问题