实现时的问题：在CSS按钮中处于活动状态 [英] Problem while Implemented :active in CSS Button

问题描述

我有问题，而使用CSS菜单。问题是我想使用：活动使我的当前按钮突出显示。

我使用< li> < a> 标签，以确保按钮背景和文本颜色在选择时变化，因为在尝试将< ; a> c>标签< li> 标记文本颜色在选择按钮时没有改变，

需要您的帮助。

这是我的CSS代码：

  a，body {
 margin-top：-30px; 
 text-decoration：none; 
} 
 
 #topmenu {
 margin-left：170px; 
 cursor：pointer; 
} 
 
 #topmenu li {
颜色：白色
 list-style：none; 
 float：left; 
 margin-right：5px; 
 padding：20px 15px 10px 15px ;; 
 box-shadow：1px 1px 1px gray; 
 -webkit-box-shadow：1px 1px 1px gray; 
 -moz-box-shadow：1px 1px 1px gray; 
 -moz-border-radius-bottomleft：5px; 
 -moz-border-radius-bottomright：5px; 
 border-bottom-left-radius：5px; 
 border-bottom-right-radius：5px; 
 -webkit-border-bottom-left-radius：5px; 
 -webkit-border-bottom-right-radius：5px; 
 background：-moz-linear-gradient（100％100％90deg，＃2F2727，＃004890）; 
 background：-webkit-gradient（linear，left top，left bottom，from（＃004890），to（＃2F2727））; 
 text-shadow：1px 1px 1px＃555; 
} 
 
 #topmenu li：hover，#topmenu li：active 
 {
 background：-moz-linear-gradient（100％100％90deg，＃FED93A ，＃FEC13A）; 
 background：-webkit-gradient（linear，left top，left bottom，from（＃FEC13A），to（＃FED93A））; 
 color：black; 
 padding-top：30px; 
} 
 
 #topmenu #home {
 margin-right：10px; 
} 
 
 #topmenu #logout {
 background：＃000; 
 color：white; 
} 
  

这是我的HTML代码：

 < div id =topmenu> 
< ul> 
< img src =includes / menu / pics.gifalt =style =float：left;/> 
< a href =../ folder / home.php>< li id =home>首页< / li>< / a> 
< a href =../ folder / A.php>< li> A< / li>< / a> 
< a href =../ folder / B.php>< li> B< / li>< / a> 
< a href =../ folder / C.php>< li> C< / li>< / a> 
< a href =../>< li id =logout>退出< / li>< / a> 
< / ul> 
< / div> 
  

解决方案

我认为问题是：

：当您点击某个元素时，但在您松开鼠标按钮之前的活动触发器。请参见动态伪类的CSS规范。 p>

下面是一个HTML页面示例，其中：< a> 和 ; h1> 元素，当您点击并按住鼠标按钮时，您会看到文字颜色变为蓝色。

 < html> 
< head> 
< style type =text / css> 
 a，h1 {color：red; } 
 a：active，h1：active {color：blue; } 
< / style> 
< / head> 
< body> 
< h1>标题< / h1> 
< a href =＃> link< / a> 
< / body> 
< / html> 
  

I have problem while make menu using CSS. The problem is I would like to use :active to make my current button highlighted. But after tried so many times, I still can't find how to implement it in my code.

I use <li> tag inside <a> tag to make sure the button background and text color change while selected, because after tried to put <a> tag outside <li> tag the text color not changed when select the button, the text only change after I put the cursor into the text.

Need your help.

This is my CSS code:

a, body {
    margin-top:-30px;
    text-decoration:none;
}

#topmenu {
    margin-left:170px;
    cursor:pointer;
}

#topmenu li {
    color:white;
    list-style:none;
    float:left;
    margin-right:5px;
    padding:20px 15px 10px 15px;;
    box-shadow:1px 1px 1px grey;
    -webkit-box-shadow:1px 1px 1px grey;
    -moz-box-shadow:1px 1px 1px grey;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #004890);
    background: -webkit-gradient(linear, left top, left bottom, from(#004890), to(#2F2727));
    text-shadow: 1px 1px 1px #555;
}

#topmenu li:hover, #topmenu li:active
{
    background: -moz-linear-gradient(100% 100% 90deg, #FED93A, #FEC13A);
    background: -webkit-gradient(linear, left top, left bottom, from(#FEC13A), to(#FED93A));
    color:black;
    padding-top:30px;
}

#topmenu #home {
    margin-right:10px;
}

#topmenu #logout {
    background:#000;
    color:white;
}

and this my HTML code:

<div id="topmenu">
 <ul>
  <img src="includes/menu/pics.gif" alt="" style="float:left;"/>
  <a href="../folder/home.php"><li id="home">Home</li></a>
  <a href="../folder/A.php"><li>A</li></a>
  <a href="../folder/B.php"><li>B</li></a>
  <a href="../folder/C.php"><li>C</li></a>
  <a href="../"><li id="logout">Logout</li></a>
 </ul>
</div>

解决方案

I think the problem is that :active doesn't mean what you think it does.

:active triggers when you click on an element, but before you let up on the mouse button. See the CSS spec on dynamic pseudo classes.

Here's an example HTML page, with :active on both the <a> and <h1> elements, you'll see the text color changes to blue when you click and hold down the mouse button.

<html>
  <head>
    <style type="text/css">
      a, h1 { color: red; }
      a:active, h1:active { color: blue; }
    </style>
  </head>
  <body>
    <h1>headline</h1>
    <a href="#">link</a>
  </body>
</html>

这篇关于实现时的问题：在CSS按钮中处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！