将鼠标悬停在一个元素上（....触发不同元素的悬停）

Question

<div id="bos_hero" class="clearfix">
    <a href="#" target="_blank"><span></span></a>
    <a href="#" target="_blank" class="rules" style="color:#fff !important;font-family: arial;"><b><u>Official</u></b></a>
    <div class="greybar">Have you seen my baseball?</div>.
    </span>
</div>

我有上面的内容：“bos_hero”基本上将整个区域包裹为一个按钮。但是 class="rules" 也是嵌套在其中的超 link。 bos_hero 和 .rules 具有悬停效果（基本上只是大小增加 1-2px; 我想触发 '.rules' 悬停事件每当bos_hero 确实如此。

以下是我目前的做法；但根本没有用——有什么想法吗？

$('#bos_hero').hover(function() {
   $('a.rules:link').css('font-size','11.5px');
);

Answer 1

一些简单的事情可能会帮助您弄清真相..

关闭您的 .hover() 函数。浏览器中的开发人员工具会为您标记它，它需要在第 3 行的右括号“}”：“);”变为 "});"

使用带破折号的 .css() 参数时，请使用引号 (")，而不是撇号 (')

$('#bos_hero').hover(function() {
   $('a.rules:link').css("font-size",'11.5px');
});

Answer 2

您只能使用 css 来完成：

#bos_hero:hover > .rules {
font-size: 11.5px;
}

将鼠标悬停在一个元素上（....触发不同元素的悬停）

hover over one element (....trigger hover for different element)

javascript

css

jquery

hover