Question

我有一个使用

加载内容的页面

$('#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>

website.css

a:hover {color:green};

<小时/> 现在，如果我向{strong> base.html 添加<style> a:hover {color:green; } </style>之类的内容，则可行，但我不想这样做。

更新：最终解决了

这里有用：

base.css 我添加了一个新类

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

restaurant1.html

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

Answer 1

将.on()与mouseenter和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，您可以选择何时添加规则）

Answer 2

制作load时，可能 CSS无法加载。只需为您的负载添加DOM ready。

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

使用JQuery分配：hover到动态加载的内容

2 个答案: