0

我有一个使用加载内容的页面

$('#header').load('head.html')，但 head.html 中的链接无法使用我的 website.css，因为 website.css 加载较早或出于其他原因。

所以我想这个$('a:hover').css('color','green');但没有成功。

我可以用标签解决，但我不想这样做。

更新：

base.html

<script> 
    $('#header').load('/restaurant{{ chosenRest }}.html'); //chosenRest=1,2..etc
</script>

<div id="accordion">
<div id="header" >   </div></div>

我有诸如 restaurant1.html、restaurant2.html 之类的文件

restaurant1.html

<a href="/Giorgio"> Giorgio's </a>

网站.css

a:hover {color:green};

现在，如果我添加类似<style> a:hover {color:green; } </style>base.html 的内容，它可以工作，但我不想那样做。

更新：终于解决了

这里有什么工作：

base.css我添加了一个新类

.restaurant:a:hover {
      color:green;
}

restaurant1.html

<a href="/Giorgio" class="restaurant"> Giorgio's </a>
4

2 回答 2

2

.on()与mouseenterand事件一起使用mouseleave并委托事件：

$(document.body).on('mouseenter','a',function()
 {
  $(this).data("oldcolor",$(this).css('color')); //Store old color
  $(this).css('color','green');
 }).on('mouseleave','a',function()
 {
  $(this).css('color',$(this).data('oldcolor')); //retrieve old color
 }
)

用于data()存储旧颜色

或者，您可以使用 vanilla JS 执行此操作：

 document.styleSheets[0].insertRule('a:hover { color: green; }', 0);

或者，只是添加 a:hover { color: green; }到样式表，但您可能不想这样做（这将从一开始就存在，而通过 JS，您可以选择何时添加规则）

于 2013-04-16T07:52:32.850 回答
0

当你 make 时， CSS可能不会加载load。只需添加DOM ready您的负载。

<script> 
$(function(){
    $('#header').load('/restaurant{{ chosenRest }}.html'); //chosenRest=1,2..etc
});
</script>
于 2013-04-16T08:29:20.393 回答