如何使用 jquery 悬停/隐藏单选按钮，同时将鼠标 hover 放在另一个单选按钮或其 label、php/mysql 上

Question

当用户将鼠标悬停在单选按钮/其 label 上时，我想显示另一个单选按钮，该用户也可以 select 但如果鼠标移动第二个单选按钮再次隐藏。 我发现了最后一个 jquery 片段，它在悬停在链接标签上时显示选择

http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/

<html>
<head>
<style type="text/css">
p.trigger {
    padding: 0 0 0 20px;
    margin: 0 0 5px 0;
    background: url(plusminus.jpg) no-repeat;
    height: 15px;
    font-size: 14px;
    font-weight: bold;
    float:left;
}
p.trigger a {
    color: #474747;
    text-decoration: none;
    display: block;
    cursor:pointer;
}
p.trigger a:hover {
    color: #ff4b43;
}
p.active {
    background-position: left bottom;
}
.toggle_container {
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    clear: both;
}
.toggle_container .block {
    padding: 0px 0px 0px 15px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
 jQuery(document).ready(function(){
    jQuery('.toggle_container').hide();
     jQuery('p.trigger').hover(function(){
    jQuery(this).toggleClass('active').next().toggle('slow');
    });
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
  <div class="block">
     <input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
   <label class='choice' for='element_1_1'>Somewhere in the middle</label>
  </div>
</div>
</body>
</html>

Answer 1

最简单的答案是，如果您负担得起，请将<input type="radio"/>都放在<div/>下，并控制该<div/>上的悬停行为。 出于相同目的，这通常使用菜单完成。

另外，如果您针对新浏览器，则可以将 jQuery 排除在外 - 它可以使用任何理解非<a/> s 上的:hover伪类的浏览器来完成。

这是一个演示这两个选项的示例页面。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#radios').hover(
                    function() { $('#radios').addClass('hover'); }, 
                    function() { $('#radios').removeClass('hover'); }
                    );
            });
        </script>
        <style type="text/css">
            /* option 1 - jquery + css, for older browsers */
            #div-radio2 {
                display: none;
            }
            .hover #div-radio2 {
                display: block;
            }
            /* option 2 - no jquery, plain css, if you target only new browsers */
            #radios:hover #div-radio2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div id="radios">
            <div id="div-radio1"><input type="radio" id="radio1" /><label for="radio1">Radio 1</label></div>
            <div id="div-radio2"><input type="radio" id="radio2" /><label for="radio2">Radio 2</label></div>
        </div>
    </body>
</html>

Answer 2

你在寻找这样的东西吗

http://jsfiddle.net/HezZa/

如何使用 jquery 悬停/隐藏单选按钮，同时将鼠标 hover 放在另一个单选按钮或其 label、php/mysql 上

问题描述

2 个解决方案

解决方案1
1 2011-08-14 20:33:14

解决方案2
0 已采纳 2011-08-14 21:01:07

如何使用 jquery 悬停/隐藏单选按钮，同时将鼠标 hover 放在另一个单选按钮或其 label、php/mysql 上

问题描述

2 个解决方案

解决方案1 1 2011-08-14 20:33:14

解决方案2 0 已采纳 2011-08-14 21:01:07

解决方案1
1 2011-08-14 20:33:14

解决方案2
0 已采纳 2011-08-14 21:01:07