1

我想创建一个按钮列表（3），其作用如下 1）在鼠标输入时更改背景和颜色，在鼠标离开时重置为基本样式。2）点击更改背景和颜色。3）充当单选按钮。（即当我选择1个按钮时，其他按钮必须返回其基本样式）。

<ul>
     <li>
          <span class="Change_button">Button1</span>
     </li>
     <li>
          <span class="Change_button">Button2</span>
     </li>
     <li>
          <span class="Change_button">Button3</span>
     </li>
</ul>

通过使用以下代码，我能够满足我的前两个需求

$(document).ready(function(){
$(".Change_button").mouseenter(function(){
    $(this).css({background:"url('button_hover.jpg') repeat scroll 0 0 transparent", color:"#FFFFFF"});
});
$(".Change_button").mouseleave(function(){
    $(this).css({background:"#C5C5C5 url('apply.jpg') center top repeat-x", color:"#625C54"
 });
}); 
$(".Change_button").click(function(){
    $(this).parent().parent("li > span").css({background:"#C5C5C5 url('apply.jpg') center top repeat-x", color:"#625C54"});
    $(this).css({background:"url('button_hover.jpg') repeat scroll 0 0 transparent", color:"#FFFFFF"});
    $(this).mouseleave(function(){
        $(this).css({background:"url('button_hover.jpg') repeat scroll 0 0 transparent", color:"#FFFFFF"});
    }); 
});
});

但是，当我们单击其中一个按钮时，我无法重置其余按钮的样式（默认样式）

    **CSS**
li {
display: inline;
font-family: Verdana,Arial,Helvetica,sans-serif;
list-style: none outside none;
}
span {
background:#C5C5C5 url('apply.jpg') center top repeat-x;
border: 1px solid #BABABA;
color: #625C54;
display: block;
float: left;
margin-right: 14px;
min-width: 60px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
width: auto;
border-radius:5px 5px 5px 5px;
cursor:pointer;
}

我搜索了与此问题相关的问题，但是，我找不到任何问题。我的坏，如果有的话。

4

2 回答 2

0

提琴手

HTML 代码：

<ul>
     <li>
          <span class="Change_button">Button1</span>
     </li>
     <li>
          <span class="Change_button">Button2</span>
     </li>
     <li>
          <span class="Change_button">Button3</span>
     </li>
</ul>

CSS：

li {
display: inline;
font-family: Verdana,Arial,Helvetica,sans-serif;
list-style: none outside none;
}
span{
border: 1px solid #BABABA;
display: block;
float: left;
margin-right: 14px;
min-width: 60px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
width: auto;
border-radius:5px 5px 5px 5px;
cursor:pointer;
}
span.Change_button{
    color: #625C54;
}
span.Change_button:hover{
    background:"#C5C5C5;
    color: red;
}
span.toggle{
    color: blue;
}
span.toggle:hover{
    color: lightgreen;
}

jQuery代码：

$('.Change_button').click(function(){
    $('.toggle').addClass('Change_button').removeClass('toggle');
    $(this).removeClass('Change_button').addClass('toggle');
});

解释：

当用户单击按钮时，它会添加一个“toggle”类并删除“change_button”类。因此，按钮被切换并应用了另一种样式，您可以使用 css 进行管理。其他按钮保留其“change_button”类和样式。

所有效果都在 CSS 中完成。

于 2013-04-28T07:36:59.823 回答
0

$(this).parent().parent("li > span").css(默认样式); $(this).parent().siblings().css(默认样式); 如果您的选择器选择正确的元素（Dom），这也是这样的，您必须像这样$(this).parent().parent("li > span").css({ "background-color": "#C5C5C5", "background-image": "URL(../IMAGES/....)", "background-repeat": "repeat-x" });

于 2013-04-28T08:08:07.460 回答