html中这种hover怎么做？

这里应该是通过监听mouseover时间给元素添加类名，达到效果。    其实可以hover伪类来实现这种效果。。。

具体代码你可以在firebug里面看这个网站的样式，你就可以模仿出来了！

设置不同的hover样式：
txt1:hover{}
txt2:hover{}
txt3:hover{}
如果非要分全局，局部。那么可以用class,id来区分：
txt:hover{}为全局
#txt:hover{}为局部

<div id="divA">aaaa</div>
<script>
var t;
$("#divA")mouseenter(function(){
t=setTimeout(function(){alert("1");},2000);
})mouseleave(function(){
clearTimeout(t);
});
</script>

第一个问题，加上hover貌似没法完美解决，可以加上fc-highlight:hover{background:red;}试试，这个需要不hover日期+内容才有效果。
第二个问题：昨天、明天日期的样式处理，需要结合JS来实现，大致实现如下（核心的思路是通过标签data-date去添加样式）。
yesterday{background:bisque;color:blue;}
tomorrow{background:cadetblue;color:red;}
$(function(){
//获取昨天日期
var day1 = new Date();
day1setTime(day1getTime() - 2460601000);
var month1 = (day1getMonth()+1);
var dy1 = day1getDate();
month1 = month1 < 10 '0'+ month1 : month1;
dy1 = dy1 < 10 '0'+ dy1 : dy1;
var yesterday = day1getFullYear()+"-" + month1 + "-" + dy1;
//获取明天日期
var day2 = new Date();
day2setTime(day2getTime() + 2460601000);
var month2 = (day2getMonth()+1);
var dy2 = day2getDate();
month2 = month2 < 10 '0'+ month2 : month2;
dy2 = dy2 < 10 '0'+ dy2 : dy2;
var tomorrow = day2getFullYear()+"-" + month2 + "-" + dy2;
//添加样式
$('[data-date="'+ yesterday +'"]')addClass('yesterday');
$('[data-date="'+ tomorrow +'"]')addClass('tomorrow');
});

我暂时想到的两种办法：
第一种方法是hover的元素和非hover的元素做两个，一个在pc端看，一个在移动端看。
第二种办法是css在media query移动端时设置，如果是从小宽度开始写，media query规定大宽度样式，就在大宽度时写hover样式。

CSS Modules 模块化方案
CSS Modules 内部通过ICSS 来解决样式导入和导出这两个问题。分别对应 :import 和 :export 两个新增的伪类。
:import("path/to/depcss") { localAlias: keyFromDep; / /}:export {
exportedKey: exportedValue; / /}
但直接使用这两个关键字编程太麻烦，实际项目中很少会直接使用它们，我们需要的是用 JS 来管理 CSS 的能力。结合 Webpack 的
css-loader 后，就可以在 CSS 中定义样式，在 JS 中导入。
启用 CSS Modules
//
webpackconfigjscssmodules&localIdentName=[name]__[local]-[hash:base64:5]
加上 modules 即为启用， localIdentName 是设置生成样式的命名规则。
/ components/Buttoncss /normal { / normal 相关的所有样式 / }disabled { /
disabled 相关的所有样式 / }
/ components/Buttonjs /import styles from
'/Buttoncss';consolelog(styles);buttonElemouterHTML = `Submit`
生成的 HTML 是
Processing
注意到 button--normal-abc5436 是 CSS Modules 按照 localIdentName 自动生成的 class
名。其中的 abc5436 是按照给定算法生成的序列码。经过这样混淆处理后，class
名基本就是唯一的，大大降低了项目中样式覆盖的几率。同时在生产环境下修改规则，生成更短的 class 名，可以提高 CSS 的压缩率。
上例中 console 打印的结果是：
Object { normal: 'button--normal-abc546', disabled:
'button--disabled-def884',}
CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和混淆后 class 的对应关系。
通过这些简单的处理，CSS Modules 实现了以下几点：
所有样式都是 local 的，解决了命名冲突和全局污染问题
class 名生成规则配置灵活，可以此来压缩 class 名
只需引用组件的 JS 就能搞定组件所有的 JS 和 CSS
依然是 CSS，几乎 0 学习成本

---