css ：悬停时的圆角 div

Question

我正在尝试完成一些看起来很简单的事情...

我有 3 个 div，其中包含一个单选按钮和一些内容：

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

[]   Content of DIV2

[]   Content of DIV3

使用 其他帖子在这里。 然而，我无法仅针对悬停事件执行此操作，即我希望仅当鼠标悬停在 div 上时才看到 div 周围出现圆形框。 有没有人在某处看到过这样做的例子？

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

Answer 1

这会在 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' });
    });


    }
    );

");

Answer 2

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

正如 Antony 提到的，jQuery 或许能够解决这个问题。

我将如何攻击它（因为我还没有探索过 jQuery）是将你的 a 标签（确实有一个悬停方法）设置为 display:block，并将所有伴随规则设置为如果它是一个 div，让它展开以填充包含的 div，然后当然，将圆角规则添加到悬停。

另一种方法是用 a 标签包围您的 div，但话又说回来，您仍然设置 display:block、背景和其他不属于 a 的规则。

这都是对语法的残酷滥用，因此在尝试我建议的任何操作之前请先备份您的工作。

祝你好运 - 始终在 div 上保持圆角可能会更容易，并考虑其他可以做的事情来调出悬停效果。

Answer 3

我相信你可以用 jquery 做到这一点。
http://docs.jquery.com/CSS

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

Answer 4

CSS 定义了悬停伪选择器，您可以利用它来解决问题，或者使用 javascript 来模拟在 onMouseEnter onMouseOut 事件上向正确的 div 添加/删除 css 类的效果。