在可能的情况下使用CSS代替JS总是更好吗？

Question

我想知道在什么情况下使用JS时可以使用纯粹的css解决方案.我一直在浏览其他问题,但无法找到我想要的答案.

假设我们有图像并希望在悬停时显示一些内容.应该使用:

示例:

    $('div.some-class').mouseover(function(){
    $(this).children('.some-class').removeClass('hidden');
    });

或者这个CSS解决方案更好:

    div:hover > .my-elem{
    opacity:1;
    });

imho,第二个解决方案是更好的但我已经使用了第一个几个月,我刚刚发现了一周前的第二个,所以我不完全确定它是否是一个有效的做法.

Answer 1

CSS解决方案有两个原因:

1. CSS与HTML一起加载,而JavaScript 在页面本身加载后加载.对于像悬停这样的事情,这不是一个大问题,但是如果你直接设置静态样式,你会注意到内容加载和JavaScript运行之间的延迟.
2. 用户通常禁用JavaScript.禁用JavaScript后,您的mouseover函数永远不会触发,而CSS无论如何都会起作用.

但是,img元素不能包含子元素,因此CSS和JavaScript都无效.