css：悬停时的圆角div

StackOverflow https://stackoverflow.com/questions/428280

  •  06-07-2019
  •  | 
  •  

题

我正在努力完成一些看起来非常简单的事情......

我有3个 div ，其中包含radiobutton和一些内容：

     Content of DIV1,
[]   this can be as long or as tall
     as wanted

[]   Content of DIV2

[]   Content of DIV3

使用其他帖子。然而，我还没有能够仅仅为悬停事件做到这一点，即我希望只有当鼠标悬停在它上面时才会看到圆形框出现在div周围。有没有人见过这样做的例子？

编辑：我已经在使用Prototype和Scriptaculous了。我不能为此添加jQuery。

有帮助吗？

解决方案

这会在div的悬停上用jquery更改CSS 

print("<div id="output" class="div"></div>



<script>

    jQuery(document).ready(function() {

    $("#output").hover(function() {
        $(this).css({ 'background-color': 'yellow', 'font-weight': 'bolder' });
    }, function() {

    $(this).css({ 'background-color': 'blue', 'font-weight': 'bolder' });
    });


    }
    );

＆quot;）;

其他提示

您可能遇到的部分问题在于，在CSS的大多数实现（以及该技术的浏览器实现）中，div没有：您可以将样式规则附加到的悬停方法。 / p>

正如Antony所说，jQuery可能能够解决这个问题。

我如何攻击它（因为我还没有探索过jQuery）是设置你的标签（ 有一个悬停方法）来显示：block，带有你所有的伴随规则将它设置为div，使其展开以填充包含div，然后当然，将圆角规则添加到悬停。

另一种方法是使用a标签包围你的div，但是再次，你仍然设置display：block，background和其他不属于a的规则。

这是对语法的残酷滥用，所以在尝试任何我建议的任何内容之前都要备份你的工作。

祝你好运 - 在div上保持四舍五入可能会更容易，想想你可以做些什么来调出悬停效果。

我相信你可以用jquery来做。
http://docs.jquery.com/CSS

http://docs.jquery.com/Events/hover

Css定义你可以利用的悬停伪选择器来解决你的问题，或者使用javascript来模拟这个效果，将css类添加到事件onMouseEnter onMouseOut上的正确div。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top