个人中心
gpt4 book ai didi

javascript - 鼠标悬停后div发生变化，div不显示

转载 作者：太空宇宙 更新时间：2023-11-04 04:16:17 25 4
gpt4 key购买 nike

嗯，我开始写这个网页，但遇到了一些我无法完全找到答案的问题。

我的代码的基本思想是:

  1. 当鼠标在“浏览网页”上时打开菜单
  2. 菜单“链接”在鼠标悬停时突出显示
  3. 当用户点击菜单项时，菜单会移动到页面顶部，并且“链接”会一直突出显示，直到用户点击其他链接为止。
  4. 当菜单移动到顶部时，下方会打开一个 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>

非常感谢您的帮助。

次要问题:当指向菜单中的文本时，如何防止光标从指针改变？

再次感谢!

最佳答案

我从来没有设法让伪类(如 :hover)按照您想要的方式运行。如果你会使用jQuery，你可以在菜单类中添加一个点击功能:

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

首先将所有背景设置为非点击颜色，然后将高亮颜色应用于点击元素。这可确保在您单击另一个元素时，先前单击的元素会突出显示。

JSFiddle

关于javascript - 鼠标悬停后div发生变化，div不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19886209/

25 4 0
文章推荐： javascript - 自动检测移动设备或分辨率并相应地调整 CSS
文章推荐： python - 删除具有一定百分比的 0's pandas 的列和行
文章推荐： python - 使用 pandas 添加超链接到 excel 工作表，它引用了另一个工作表
文章推荐： javascript - 想要按钮 onClick 到 getDay 网页
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com