CSS悬停到onclick对话 [英] css hover to onclick conversation

问题描述

我想知道是否有人可以帮助我.我正在尝试制作一个简单的作品集网站，并且该链接位于顶部导航栏中，当单击该链接时，该链接将在标题下方显示一个水平菜单.到目前为止，我已经将其与CSS一起使用了，但是我不喜欢将鼠标悬停在菜单上时的外观，如果单击并停留在菜单上直到再次单击同一链接，菜单看起来会更加专业.如果有人可以帮助我，那将很棒.我已经尝试过各种Java教程，但对我的理解还不是很成功.

I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underneath the header. So far I have goten it to work with just css, but I don't like how the menu appears when hovered, it would look much more professional if it appeared when clicked and stayed there until you click on the same link again. if anyone could help me that'll be great. I've tried all sorts of java tutorials and won't very successful I didn't fully understand it.

<header>
    <a class="home" href="../index.htm" title="Home Page"></a>
    <a class="to_nav" href="#nav" ></a>
    <div class="logo">
        <a href="#top">
            <h1>Deeran</h1>
            <span>Graphic Design</span>
        </a>
    </div>
    <nav>
        <ul class="drop">
            <li>
                <a id="menu"></a>
                <ul class="hide">
                    <li><a href="#folio">Portfolio</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact/Hire</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

这是CSS

nav {margin: 0; padding: 0;}
nav ul li a#menu {
    display: block;
    width: 67px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-top: 9px;
    margin-right: 15px;
    margin-bottom: 0px;
    margin-left: 15px;
}

nav ul ul.hide {
    display: none;
    list-style: none;
    margin: 10px 0 0;
    text-indent: none;
    clear: both;
    width: 100%;
    position: absolute;
    left: 0px;
}

nav ul ul.hide li {margin: 0;}
nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

如果有一种简单的方法可以将:hover函数转换为onClick，我将不胜感激:)

if there was one simple way to convert that one :hover function to onClick I would be very grateful :)

推荐答案

make

nav ul li:hover > ul {
    display: block;
    list-style-type: none;
    }

到

nav ul li.active > ul {
    display: block;
    list-style-type: none;
    }

然后使用javascript添加类active onClick.

Then use javascript to add a class active onClick.

让SO如此美妙的是，我们可以轻松地引用类似的案例:)

What makes SO wonderful is that we can refer to similar cases easily :)

对于javascript部分，请参考此答案.

For javascript part please refer this answer .

使用JavaScript无库添加/删除类onclick

这篇关于CSS悬停到onclick对话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！