Bootstrap Asp.net RadioButton悬停样式
我正在使用bootstrap和asp.net。
我怎样才能使用asp.net单选按钮(而不是单选按钮列表)有一个像附加的图像悬停。或者类似的。
请举个例子
回答 1
Stack Overflow用户
发布于 2017-06-20 15:20:19
样式和外观
jQWidgets使用一对css文件- jqx.base.css和jqx.theme name.css。基本样式表创建与小部件布局相关的样式，如边距、填充、边框宽度、位置。第二个css文件应用小部件的颜色和背景。jqx.base.css应该包含在第二个CSS文件之前。
下面是jqxButtons使用的CSS类的列表。jqxRadioButton样式
jqx-小部件-应用于jqxRadioButton小部件。jqx-radiobutton应用于jqxRadioButton的外部div元素。jqx-radiobutton default -当复选框的状态为default时应用于该复选框。jqx-fill- state -normal -当复选框的状态为default时，该复选框将应用于该复选框。jqx-单选按钮-悬停-应用于复选框当鼠标光标悬停在复选框上时jqx-填充-状态-悬停-应用于复选框当鼠标光标悬停在复选框上jqx-单选按钮-禁用复选框当小工具被禁用时jqx-单选按钮-禁用-applied -应用于复选框当禁用jqxRadioButton时应用于复选框。jqx-radiobutton check- checked -在选中jqxRadioButton时应用于选中框。在禁用jqxRadioButton时，显示应用于复选框的复选图标jqx-radiobutton check - disabled。当jqxRadioButton处于不确定状态时，显示已禁用的复选图标jqx-单选按钮-复选-不确定-应用于复选框。在检查框内显示一个矩形。jqx-单选按钮-检查-不确定-禁用-当jqx-单选按钮处于不确定状态并且jqxradiobutton被禁用时，应用于复选框。在复选框内显示一个灰色(禁用)矩形。jqx-fill-state-disabled -禁用时应用于jqxRadioButton。jqx-fill-state-focus -当jqxRadioButton被聚焦时应用于它。当你为jqxRadioButton创建一个带有颜色和背景的自定义样式时，你需要做以下的事情:在每个CSS类之后添加上述与jqxRadioButton相关的CSS类，添加你的主题名称。例如:jqx-radiobutton summer要将您的自定义样式应用于jqxRadioButton，您需要将其' theme‘属性(Option)设置为指向您的主题名称字符串。
$("#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
https://stackoverflow.com/questions/44556280
复制相似问题
腾讯云开发者
