如何防止我的<按钮>禁用my:hover的标签

How do I prevent my <button> tag from disabling my :hover?

本文关键字：my 标签 hover 禁用 按钮 何防止 我的 lt gt      更新时间：2023-09-26

我将#welcome包装在一个按钮中，因此单击时会产生效果。按钮似乎什么都没做，并且由于某种原因，我的元素的初始功能（：悬停）被禁用了。我该如何恢复？

HTML后接CSS后接JavaScript（三者都在单独的文件中）：

<!DOCTYPE html>
<html lang="en-US">
    <head>  
        <meta name="keywords" content="Jerrell, Cockerham, Blogs, Podep, Tramx">
        <meta name="description" content="Jerrell Cockerham's website for his organized thoughts and feelings.">
        <meta name="author" content="Jerrell Cockerham">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jerrell Cockerham</title>    
    </head>
    <body style="background-color: black;">
        <div class="top-bar">
            <div id="strip">
                <span style="color: #808080">_</span>
            </div>
            <a href="D:'Coding projects'My personal website'jerrell.html">
                <h1 id="name">
                    <span id="jerrell">Jerrell</span> 
                    <span id="cockerham">Cockerham</span>
                </h1>
            </a>
            <h4 id="options">
                <span id="splits">|</span> 
                <a href="#" style="text-decoration: none"><span id="go">About</span></a> 
                <span id="splits">|</span> 
                <a href="#" style="text-decoration: none"><span id="go-two">Search</span></a> 
                <span id="splits">|</span>
            </h4> 
        </div>
        <div class="welcome">
            <button onclick="openUp()"><p id="welcome">Click to Begin</p></button>
        </div>
        <div class="mncourse">
            <table id="tissue">
                <tr id="podep">
                    <td id="podepdat">
                            <p id="high1"><a href="D:'Coding projects'My personal website'podep.html" style="text-decoration: none; color: #66ffff;">Positively Dependent</a></p>
                            <p id="low1"><a href="D:'Coding projects'My personal website'podep.html" style="text-decoration: none; color: white;">Attempts to poetically express my feelings.</a></p>
                    </td>
                    <td id="tramxdat">
                        <p id="high2"><a href="D:'Coding projects'My personal website'tramx.html" style="text-decoration: none; color: #66ffff;">Trail Mix</a></p>
                        <p id="low2"><a href="D:'Coding projects'My personal website'tramx.html" style="text-decoration: none; color: white;">Everything I find interesting in mathematics.</a></p>
                    </td>
                </tr>
            </table>
        </div>
        <b><p class="cred">Photo taken with iPhone</p></b>
    </body>
    <link href="jerrell.css" rel="stylesheet" type="text/css" />    
    <script src="jerrell.js"></script>
</html>

/* #66ffff (blu), white (wht), #535353 (gry) */

body {
    background: url(intric.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 1200px;
}
#name {
    font-family: Trebuchet MS;
    position: fixed;
    top: -20px;
    z-index: 1;
}
#jerrell {
    color: #66ffff;
}
#cockerham {
    color: white;
}
#strip {
    position: fixed;
    left: -50px;
    top: -10px;
    background-color: #535353;
    width: 2000px;
    height: 50px;
    opacity: .9;
}
#options {
    font-family: Trebuchet MS;
    position: fixed;
    right: 5px;
    top: -11px;
    z-index: 1;
}
#splits {
    color: white;
}
#go {
    color: #66ffff;
}
#go-two {
    color: #66ffff;
}
#go:hover {
    color: white;
}
#go-two:hover {
    color: white;
}
.welcome {
}
#welcome {
    position: fixed;
    font-family: Trebuchet MS;
    width: 400px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 0px;
    text-align: center;
    top: 42%;
    color: white;
    font-size: 50px;
    z-index: 4;
}
#welcome:hover {
    opacity: .7;
}
.mncourse {
    pointer-events: none;
    position: fixed;
    text-align: center;
    left: 0;
    right: 0;
    top: 42%;
}
#tissue {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 20px;
}
#high1 {
    font-family: Trebuchet MS;
    font-size: 32px;
}
#low1 {
    font-family: Trebuchet MS;
    font-size: 20px;
}
#high2 {
    font-family: Trebuchet MS;
    font-size: 32px;
    color: #66ffff;
}
#low2 {
    font-family: Trebuchet MS;
    color: white;
    font-size: 20px;
}
td {
    padding: 15px;
}
#podepdat {
}
#tramxdat {
}
.cred {
    position: relative;
    height: 25px;
    width: 250px;
    top: 1180px;
    font-family: Trebuchet MS;
    color: white;
}

function openUp() {
    document.getElementById("welcome").style.pointer-events = "auto";
    document.getElementById("strip").style.color = "red";
}

我真的不知道如何回答这个问题，但首先，你需要设置一个根目录。根目录可以用XAMPP、WAMP、MAMP甚至NANP创建。我更喜欢XAMPP。所有这些程序都是一个本地网站（用于测试或娱乐）。同样，在像<a href=" <!-- HERE Spaces . . . . . --> ">这样的链接中增加空格也是不明智的。只是不要那样做。不要使用间隔使用%20，这是更好的方法

至于你的问题，我想我知道解决它的方法，可能发生这种情况的原因是你实际上从未将脚本设置为openUp()。因此，如果您创建一个实际的JS函数，它可能对您更有效。如果你不知道如何制作一个函数，那就看看我在这篇文章底部的脚本吧

现在让我们进入这个按钮的CSS，我相信这就是。当一个人点击欢迎按钮时，会出现一个DIV，好吧，你需要在CSS中有两个新的CLASSES，所以现在看看这个脚本，了解如何为它制作正确的样式：

<html>
    <head>
        <title>Your title</title>
        <style>
            .hidden {
                display:none;
            }.visible {
                display:block;
            }
            .hovering {color:white;background:black;}
            .hovering:hover {color:Black;Background:white;}
        </style>
    </head>
    <body>
        <button id="YourButtonID" onclick="show()" class="hovering">Show welcome DIV</button>
        <div id="HiddenArea" class="hidden">
            <p>This is the hidden area that will be appearing onclick above and close if you click iy again.</p>
        </div>
        <!-- This is where it begins to be tricky -->
        <script>
            function onclick() {
                document.getElementById('HiddenArea').setAttribute('class', 'visible');
                document.getElementById('YourButtonID').setAttribute('onclick', 'hide()');
                document.getElementById('YourButtonID').innerHTML == 'Hide';
            }
            function hide() {
                document.getElementById('HiddenArea').setAttribute('class', 'hidden');
                document.getElementById('YourButtonID').setAttribute('onclick', 'show()');
                document.getElementById('YourButtonID').innerHTML == 'Show';
            }

        </script>
    </body>
</html>

那么这到底是干什么的呢？

这个脚本加载了一个函数，所以当点击按钮时，它会将Attribute更改为hide()，还会显示一个隐藏的DIV并指定

首先，您需要定位button元素，而不是其中包含的p。因此，您为.welcome button元素创建css规则，并将所有定位规则从p移动到它。

然后将:hover规则更改为.welcome button。

最后，在javascript函数中，您需要更改：

document.getElementById("welcome").style.pointer-events = "auto";

至：

document.getElementById("welcome").style.pointerEvents = "auto";

或发送至：

document.getElementById("welcome").style.setProperty("pointer-events","auto");

否则，该连字符将被视为减号。

这里有一个演示（你仍然需要定位那些较低的div，我不知道你想让它们看起来怎么样）：

https://jsfiddle.net/h2wchead/1/

  1. 从按钮标签中移除p标签。

    <button onclick="openUp()" id="welcome">Click to Begin</button>

  2. 我无法添加评论。指针事件似乎与事件侦听器的工作方式不同。希望其他人能澄清。这对我很有效。
    修改js、中的行

    document.getElementById("welcome").className = "pointer-clicks";

  3. 然后添加CSS、

    .pointer-clicks{
  pointer-events: auto;
}

参考文献：
https://css-tricks.com/almanac/properties/p/pointer-events/
https://davidwalsh.name/pointer-events

相关文章：