2023年2月19日 04:46:21go评论61阅读模式

英文:

Why does on Hover quit working after it is selected once?

问题

以下是您的代码的翻译部分，包括HTML和JavaScript的内容：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .menu {
        background-color: cornflowerblue;
      }

      .btn-group .button {
        background-color: #4CAF50; /* 绿色 */
        border: 1px solid green;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        width: 150px;
        display: block;
      }

      .btn-group .button:hover {
        background-image: linear-gradient(to bottom, rgb(92, 88, 46), rgb(247, 229, 41), rgb(92, 88, 46));
        color: red;
      }
    </style>
  </head>
  <body onload="fnOnLoad()">
    <div class="menu">
      <div class="btn-group">
        <button id="WhatsNew" onclick="btnClick('WhatsNew')" class="button">What's New</button>
        <button id="Button1" onclick="btnClick('Button1')" class="button">Button1</button>
        <button id="Button2" onclick="btnClick('Button2')" class="button">Button2</button>
        <button id="Button3" onclick="btnClick('Button3')" class="button">Button3</button>
        <button id="Button4" onclick="btnClick('Button4')" class="button">Button4</button>
      </div>
    </div>
  </body>
  <script>
    let curBtn = "WhatsNew";

    function fnOnLoad() {
      btnClick("WhatsNew");
    }

    function btnClick(btnName) {
      document.getElementById(curBtn).style.backgroundColor = "rgb(33, 31, 31)";
      document.getElementById(curBtn).style.backgroundImage = "none";
      document.getElementById(curBtn).style.color = "rgb(255, 234, 0)";

      document.getElementById(btnName).style.color = "rgb(17, 15, 15)";
      document.getElementById(btnName).style.backgroundImage = "linear-gradient(to bottom, rgb(92, 88, 46), rgb(247, 229, 41), rgb(92, 88, 46))";
      curBtn = btnName;
    }
  </script>
</html>

请注意，这只是代码的翻译，不包括您提到的问题的解决方案。如果您需要关于问题的解决方案，请提供更多详细信息，以便我可以帮助您。

英文:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.menu{
background-color: cornflowerblue;
}
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
}
.btn-group .button:hover {
background-image: linear-gradient(to bottom,  rgb(92, 88, 46),  
rgb(247, 229, 41),              
rgb(92,88,46));
color:red;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onload=&quot;fnOnLoad()&quot;&gt;
&lt;div class=&quot;menu&quot;&gt; 
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button id = &quot;WhatsNew&quot; onclick=&quot;btnClick(&#39;WhatsNew&#39;)&quot; class=&quot;button&quot;&gt;What&#39;s New&lt;/button&gt;
&lt;button id = &quot;Button1&quot; onclick=&quot;btnClick(&#39;Button1&#39;)&quot; class=&quot;button&quot;&gt;Button1&lt;/button&gt;
&lt;button id = &quot;Button2&quot; onclick=&quot;btnClick(&#39;Button2&#39;)&quot; class=&quot;button&quot;&gt;Button2&lt;/button&gt;
&lt;button id = &quot;Button3&quot; onclick=&quot;btnClick(&#39;Button3&#39;)&quot; class=&quot;button&quot;&gt;Button3&lt;/button&gt;
&lt;button id = &quot;Button4&quot; onclick=&quot;btnClick(&#39;Button4&#39;)&quot; class=&quot;button&quot;&gt;Button4&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
let curBtn = &quot;WhatsNew&quot;;
function fnOnLoad(){
/*alert(&quot;In OnLoad&quot;); */
btnClick(&quot;WhatsNew&quot;);
}
function btnClick(btnName){
/*alert(&quot;Setting button colors.  curBtn = &quot; + curBtn + &quot; btnName = &quot; + btnName);*/
document.getElementById(curBtn).style.backgroundColor = &quot;rgb(33, 31, 31)&quot;;
document.getElementById(curBtn).style.backgroundImage = &quot;none&quot;;
document.getElementById(curBtn).style.color = &quot;rgb(255, 234, 0)&quot;;
document.getElementById(btnName).style.color = &quot;rgb(17, 15, 15)&quot;;
document.getElementById(btnName).style.backgroundImage = &quot;linear-gradient(to bottom,  rgb(92, 88, 46),  rgb(247, 229, 41),  rgb(92,88,46))&quot;;
curBtn = btnName;
/*alert(&quot;after curBtn = &quot; + curBtn);*/
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

I want the menu items to change to the gradient when hovered or when selected. The way it's working now it works until you select that menu item. Once you click another menu item the ones previously selected do not do the gradient anymore.

This site won't let me post without more details.... If you try the above code the first item is highlighted when it starts. As you hover over the other items you see them highlighted. After you select a new item the old one no longer highlights when you hover over it. Why?

Thanks for any ideas.

Alan

答案1

得分: 0

当你使用JS设置样式规则时，会覆盖之前用CSS写的规则，因此在取消设置后将不再起作用。

我建议你仅使用JS来设置元素的类名，让CSS负责设置规则。

要注意以正确的顺序编写规则。

<!-- 开始代码片段: js 隐藏: false 控制台: true babel: false -->

<!-- 语言: lang-js -->
let curBtn = "WhatsNew";

function btnClick(btnName) {
  document.getElementById(curBtn).classList.add("visited");
  document.getElementById(curBtn).classList.remove("selected");
  document.getElementById(btnName).classList.add("selected");
  curBtn = btnName;
}

<!-- 语言: lang-css -->
.menu {
  background-color: cornflowerblue;
}

.btn-group .button {
  background-color: #4CAF50;
  /* 绿色 */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group .button.visited {
  background-color: rgb(33, 31, 31);
  background-image: none;
  color: rgb(255, 234, 0);
}

.btn-group .button.selected {
  color: rgb(17, 15, 15);
  background-image: linear-gradient(to bottom, rgb(92, 88, 46), rgb(247, 229, 41), rgb(92, 88, 46));
}

.btn-group .button:hover {
  background-image: linear-gradient(to bottom, rgb(92, 88, 46), rgb(247, 229, 41), rgb(92, 88, 46));
  color: red;
}

<!-- 语言: lang-html -->
<div class="menu">
  <div class="btn-group">
    <button id="WhatsNew" onclick="btnClick('WhatsNew')" class="button">What's New</button>
    <button id="Button1" onclick="btnClick('Button1')" class="button">Button1</button>
    <button id="Button2" onclick="btnClick('Button2')" class="button">Button2</button>
    <button id="Button3" onclick="btnClick('Button3')" class="button">Button3</button>
    <button id="Button4" onclick="btnClick('Button4')" class="button">Button4</button>
  </div>
</div>

<!-- 结束代码片段 -->

英文:

When you set a style rule with JS you erase the one you wrote with css so it wont work anymore after being unset.

I suggest you use JS only to set class names to your element and let CSS in charge of setting the rules.

Careful to write the rules in the right order.

let curBtn = &quot;WhatsNew&quot;;
function btnClick(btnName) {
document.getElementById(curBtn).classList.add(&quot;visited&quot;);
document.getElementById(curBtn).classList.remove(&quot;selected&quot;);
document.getElementById(btnName).classList.add(&quot;selected&quot;);
curBtn = btnName;
}

.menu {
background-color: cornflowerblue;
}
.btn-group .button {
background-color: #4CAF50;
/* Green */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
}
.btn-group .button.visited {
background-color: rgb(33, 31, 31);
background-image: none;
color: rgb(255, 234, 0);
}
.btn-group .button.selected {
color: rgb(17, 15, 15);
background-image: linear-gradient(to bottom, rgb(92, 88, 46), rgb(247, 229, 41), rgb(92, 88, 46));
}
.btn-group .button:hover {
background-image: linear-gradient(to bottom, rgb(92, 88, 46),
rgb(247, 229, 41),
rgb(92, 88, 46));
color: red;
}

&lt;div class=&quot;menu&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button id=&quot;WhatsNew&quot; onclick=&quot;btnClick(&#39;WhatsNew&#39;)&quot; class=&quot;button&quot;&gt;What&#39;s New&lt;/button&gt;
&lt;button id=&quot;Button1&quot; onclick=&quot;btnClick(&#39;Button1&#39;)&quot; class=&quot;button&quot;&gt;Button1&lt;/button&gt;
&lt;button id=&quot;Button2&quot; onclick=&quot;btnClick(&#39;Button2&#39;)&quot; class=&quot;button&quot;&gt;Button2&lt;/button&gt;
&lt;button id=&quot;Button3&quot; onclick=&quot;btnClick(&#39;Button3&#39;)&quot; class=&quot;button&quot;&gt;Button3&lt;/button&gt;
&lt;button id=&quot;Button4&quot; onclick=&quot;btnClick(&#39;Button4&#39;)&quot; class=&quot;button&quot;&gt;Button4&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

为什么在选择一次后悬停就不起作用了？

问题

答案1

Hover 和 JS 动画/交互在 `` 元素上无法正常工作。

添加账户功能到Web应用的方法

在画布中如何在另一个旋转的矩形周围创建一个矩形？

How to check that my Regex is safe: Unsafe Regular Expressioneslintsecurity/detect-unsafe-regex

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论