Question

我在页面上有一些按钮，大约有10个asp按钮。我正在使用CSS类来实现按钮鼠标悬停和鼠标离开的效果。我面临的问题是，当我单击一个按钮时，我想将CSS类应用于单击的按钮并希望保留它，但是当我将鼠标悬停在该按钮上时，该类将被删除。实际上，我想要禁用所选（单击）按钮的类更改。因此，如果我有5个按钮btn1, btn2, btn3, btn4, btn5而我选择的按钮是btn3，如果我将鼠标悬停在btn3上并保留此btn3，则不应该松开其css类。< / p>

这是我应用CSS类的代码：

 <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            // mouse hover
            $("[id^='MangoPager_btn']").mouseenter(mouseenterfunction);
            // mouse leave
            $("[id^='MangoPager_btn']").mouseleave(mouseleavefunction);           

        });

        function mouseleavefunction() {

            $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass");
        }

        function mouseenterfunction() {

            $(this).addClass("pagerbtnMouseEnter");
        }

    </script>

以及点击按钮时我正在使用的代码：

     private void SetSelectedButtonStyle()
            {
ResetCss():
                //selectedItemClass 
                Button selectedButton = FindButtonWithText(_currentPageIndex.ToString());
                if (selectedButton != null)
                {
                    selectedButton.CssClass = "pagerbtnMouseEnter";
                }
            }

 private void ResetCss()
        {            

            for (int i = 1; i <= MAX_PAGE_SIZE; i++)
            {
                Button btn = (Button)FindControl(string.Format("btn{0}", i));
                btn.CssClass = "buttonclass";
            }
        }

当我执行鼠标悬停或鼠标离开时，我必须阻止所选按钮更改CSS类。

Answer 1

您可以保存在对象中单击的Button的ID：

var clickedButtons = {};

$("[id^='MangoPager_btn']").click(function(){
    clickedButtons[this.id] = true;
});

然后修改mouseleave以检查是否已单击该按钮并仅在未单击该类时删除该类：

    function mouseleavefunction() {
         if (clickedButtons[this.id] !== true){
            $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass");
          }

    }

Answer 2

这样的事情对你有用吗？


$(document).ready(function(){
    $("[id^='MangoPager_btn']").live(function() {
       click: function() {
          $(this).addClass("clickClass");
       },
       mouseover: function() {
          $(this).addClass("pagerbtnMouseEnter");
       },
       mouseout: function() {
          $(this).removeClass("pagerbtnMouseEnter")
          $(this).addClass("clickClass");
       }
    });
});

Answer 3

您的按钮有3种不同的状态： - 正常 - 徘徊 - 选择

为什么你只有2节课？如果你想这样做，你应该有另一个css类用于按下状态，然后在你的悬停功能上你将检查你的按钮是否具有所选类，如果它没有那么做。

但是你不知道只有css才能实现悬停状态吗？

.myClass
{
  background-color : blue;
}

.myClass:hover
{
  background-color : red;
}

每当你将鼠标悬停时，这将改变myclass元素的背景颜色。

所以你可以做的是删除所有你的mouseenter / mouseleave的jquery代码

为点击状态创建一个新类。

.buttonClass
{
   // Your button style
}
.buttonClass:hover
{
   // Your mousein button style 
}
.buttonClicked
{
   // Your selected/clicked button style
}

在你的asp.net页面上juste用buttonClicked类替换单击按钮的.button类：）

如何使用jquery保持选定的asp按钮的css类？

3 个答案: