Bootstrap Asp.net RadioButton 悬停样式答案

【问题标题】：Bootstrap Asp.net RadioButton hover stylingBootstrap Asp.net RadioButton 悬停样式
【发布时间】：2017-11-17 06:50:36
【问题描述】：

我正在使用引导程序和 asp.net。

如何使用 asp.net 单选按钮（不是单选按钮列表）像附加的图像一样悬停。或类似的。

请举例说明

【问题讨论】：

使用JQuery看下面的例子

标签： asp.net twitter-bootstrap radio-button

【解决方案1】：

样式和外观

jQWidgets 使用一对 css 文件 - jqx.base.css 和 jqx.[主题名称].css。基本样式表创建与小部件布局相关的样式，例如边距、填充、边框宽度、位置。第二个 css 文件应用小部件的颜色和背景。 jqx.base.css 应该放在第二个 CSS 文件之前。

下面是 jqxButtons 使用的 CSS 类列表。 jqxRadioButton 样式

jqx-widget - 应用于 jqxRadioButton 小部件。 jqx-radiobutton - 应用于 jqxRadioButton 的外部 div 元素。 jqx-radiobutton-default - 当其状态为默认时应用于复选框。 jqx-fill-state-normal - 当其状态为默认时应用于复选框。 jqx-radiobutton-hover - 当鼠标光标在它上面时应用于复选框 jqx-fill-state-hover - 当鼠标光标在它上面时应用于复选框 jqx-radiobutton-disabled - 当小部件被禁用时应用于复选框 jqx-radiobutton-disabled-box - 当 jqxRadioButton 被禁用时应用于复选框。 jqx-radiobutton-check-checked - 当 jqxRadioButton 被选中时应用于复选框。显示一个复选图标 jqx-radiobutton-check-disabled - 当 jqxRadioButton 被禁用时应用于复选框。显示禁用的复选图标 jqx-radiobutton-check-indeterminate - 当 jqxRadioButton 处于不确定状态时应用于复选框。在复选框内显示一个矩形。 jqx-radiobutton-check-indeterminate-disabled - 当 jqxradiobutton 处于不确定状态并且 jqxRadioButton 被禁用时，应用于复选框。在复选框内显示一个灰色（禁用）矩形。 jqx-fill-state-disabled - 禁用时应用于 jqxRadioButton。 jqx-fill-state-focus - 聚焦时应用于 jqxRadioButton。当您为 jqxRadioButton 创建具有颜色和背景的自定义样式时，您需要执行以下操作：添加上述与jqxRadioButton相关的CSS类在每个 CSS 类之后，添加您的主题名称。例如： jqx-单选按钮-夏天要将您的自定义样式应用到 jqxRadioButton，您需要将其“主题”属性（选项）设置为指向您的主题名称字符串。

$("#jqxradiobutton").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });

下面的示例演示了如何将“Summer”主题设置为 jqxRadioButton。

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Radio Button CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxRadioButton.
            $("#jqxradiobutton1").jqxRadioButton({theme: 'summer', width: 120, height: 25 });
            $("#jqxradiobutton2").jqxRadioButton({ theme: 'summer', width: 120, height: 25 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxradiobutton1'>
        Radio Button 1</div>
    <div id='jqxradiobutton2'>
        Radio Button 2</div>
</body>
</html>

参考this link for further details

【讨论】：