Html 鼠标悬停在dreamweaver实时预览上工作，但在我托管的网站上不工作

我正在使用Dreamweaver开发一个网站。我正在尝试使用CSS来获得以下效果。基本上，当我将鼠标悬停在图像上时，我希望图像变暗并显示一些文本

这在Dreamweaver实时预览上运行良好，但在我托管的网站上不起作用。在我的托管网站上，它显示了以下内容：

Mt HTML代码为：

.col{
边界半径：50%；
背景色：“EAEAEA”；
浮动：左；
利润底部：5%；
利润率最高：5%；
位置：相对位置；
}
上校：悬停。反应灵敏的图像{
过渡：所有200ms的缓进缓出；
转换：比例（1.2）；
滤光片：亮度（20%）；
}
.响应图像{
边界半径：50%；
宽度：100%；
高度：250px；
位置：相对位置；
显示：内联块；
溢出：隐藏；
最大宽度：100%；
过渡：所有200ms的缓进缓出；
}
.图像上的文本{
不透明度：0；
过渡：放松；
}
.col：图像上的悬停文本{
不透明度：1；
过渡：放松；
}
.文本标题{
颜色：白色；
字体大小：30px；
字号：100；
字母间距：0.1米；
位置：绝对位置；
最高：35%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
宽度：100%；
}
.text desc{
颜色：白色；
字号：200；
字母间距：0.1米；
字体大小：15px；
位置：绝对位置；
最高：70%；
左：50%；
宽度：100%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

发黄的
这是一款社交网络iOS应用程序，人们可以在其中找到周围或世界上任何城市发生最多事情的地方

你能分享到你的托管站点的链接吗？如果你看到，你的托管站点上的css没有

。col:hover。响应图像

声明，请检查你的最新更改是否已正确上传由于一些非常奇怪的原因，dreamweaver没有在styles上托管这些类。你知道为什么吗？不知道dreamweaver的工作原理