Question

我有以下结构：

<div id="content-header">
<h1 id="title">Athletics Calendar</h1>
</div>

和以下jquery在h1标签

之后添加了一些链接

$(document).ready(function() {
$("body[class*=page-calendar-practices] #content-header h1#title").after("<div id='athletics_practice-schedule'><div id='inner-title'><a href='calendar/practices/games' class='athletics_links'>GAMES</a><a href='calendar/practices' class='athletics_links'>PRACTICES</a></div></div>");

});

链接出现了，但是因为我需要在我插入的外部div上放置-15px的余量（为了提升div ...我出于技术原因需要这样做），现在如果你徘徊在链接上没有任何显示，但如果你将鼠标悬停在它下方就可以了。有没有办法来解决这个问题？我有一个不同的帖子，有人建议使用下面的代码修改链接，但它不起作用，没有什么改变颜色，所以我甚至不确定如何使用它。

$(document).on('mouseenter', 'body[class*=page-calendar-practices] #content-header div#inner-title', function() {
$(this).css('color','red !important');
}).on('mouseleave', 'body[class*=page-calendar-practices] #content-header div#inner-title', function() {
$(this).css('color','blue !important');
});

Answer 1

代码会更改其中#inner-title div而不是anchor标记的颜色，请尝试以下操作：

$('#content-header').on('mouseenter', '#inner-title a', function() {
      $(this).css('color','red');                                
}).on('mouseleave', '#inner-title a', function() {
     $(this).css('color','blue');
});

DEMO

Answer 2

简单地将div向上移动15px，一个更好的css应该是相对位置，顶部为-15px。它将计算静态位置并添加-15的校正，以便进行简单的解释。可以检查这样做是否仍会产生悬停问题。

使用jquery创建链接的负边距

2 个答案: