Question

我想隐藏两个默认的单选按钮，而是使用两个图像。悬停时，我希望图像褪色，设置动画，获得边框<-可以。单击后，我希望标签img保留：hover类的属性

.weight-panel label：hover->在桌面上可以正常工作。：checked的任何组合都不适合我

我也尝试过jQuery在单击时删除/添加一个类，但是没有运气，尽管我的语法可能不正确

我发现的任何其他示例都不是特定于aspx的，并且我想知道是否缺少一些aspx / VB片段。

.weight-panel{width: 100%;border: 1px solid #eee;border-radius: 4px;padding: 15px 15px 5px 15px;height: auto;min-height: 140px;}

.weight-btn-wrapper {width: 35%;display: inline-block;margin: 0 3% 0 9%;opacity: 1;height: auto;float: left;}

.weight-panel input[type=radio] {opacity: 0;}
.weight-panel label img{width:90%; max-width:150px;}
.weight-panel label:hover{border: 1px solid #9db2c4;border-radius: 5px;       opacity: 0.6;transition: all .3s ease-in-out;box-sizing: border-box;      margin: -1px 0 0 -1px;}

----- attempted to use these with the jQuery
.checkedlabel{border: 1px solid #9db2c4;border-radius: 5px;opacity: 0.6;        transition: all .3s ease-in-out;box-sizing: border-box;margin: -1px 0 0 -1px;}
.uncheckedlabel{border:none;opacity: 1;box-sizing: border-box;margin: 0}
-----------------

$(document).ready(function() {
  $('#weight').removeClass('checkedlabel').addClass('uncheckedlabel');
});

<asp:Panel ID="weight" runat="server" CssClass="weight-panel">
  <div class="weight-btn-wrapper">
    <asp:RadioButton ID="weight1" runat="server" GroupName="WeightOption" AutoPostBack="true" CssClass="weight-btn" Checked="true" OnCheckedChanged="WeightOptionChanged"/>
    <label for="weight1"> <img src="content/images/therma-comfort/weight-1.png" /></label>
  </div>
  <div class="weight-btn-wrapper">
     <asp:RadioButton ID="weight2" runat="server" GroupName="WeightOption" AutoPostBack="true" CssClass="weight-btn" OnCheckedChanged="WeightOptionChanged"/>
     <label for="weight2"> <img src="content/images/therma-comfort/weight-2.png" /></label>
   </div>
</asp:Panel>

在选中单选按钮时，我无法将任何条件CSS分配给单选按钮标签。一旦我离开悬停，标签就会恢复为初始类

如何在aspx中将类分配给选中的单选按钮标签img

0 个答案: