在可能的情况下使用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都无效。

Answer 2

案例1：首选CSS到JS
1. CSS 3是CSS + JS的混合体，这使您能够更快地开发代码，而不是编写自己的自定义JS 2.阻止你查询DOM 3.加载HTML（比JS更快）

案例2：首选JS到CSS
1.在使用没有CSS3支持的旧浏览器时，这将对您有所帮助 2.帮助您处理CSS仍然没有支持的其他DOM功能。 （例如：你可以在CSS中改变元素悬停时其他元素的颜色，但不能对JS变量或逻辑进行任何更改）