无涯教程网

CSS 悬停与 JavaScript 鼠标悬停

发布于03月04日

有时候，我可以 Select 使用CSS元素:HOVER或JavaScript onMouseover来控制页面上html元素的外观.考虑以下场景，其中div包装输入

<div>
<input id="input">
</div>

当鼠标光标悬停在div上时，我希望输入更改背景 colored颜色 .CSS方法是

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

JavaScript方法是

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

每种方法的优缺点是什么？CSS方法是否适用于大多数web浏览器？JavaScript比css慢吗？

推荐答案

HOVER的问题是IE6只在链接上支持它.这些天我使用jQuery来做这类事情:

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

让事情变得容易多了.这将适用于IE6、FF、Chrome和Safari.

Css相关问答推荐

Safari CSS扫描动画效果不起作用

如何在CSS中平滑线性平移动画

当鼠标移到侧边栏之外时，如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断？

覆盖现有像素的混合

将 tailwincss 转换为普通 CSS？

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

css渐变实现2色虚线边框

React Typescript 中的自动 typewriter 效果

zoom 时闪烁的背景滤镜模糊

对齐视图中的复选框(RN)

你如何调试可打印的 CSS？

在 CSS 或 JavaScript 中反转图像的 colored颜色

CSS - 在 id 中 Select 类的语法

rotate3d 速记

范围内的 CSS 未在组件中应用

在 Twitter Bootstrap 中创建圆角的正确方法

CSS过渡自动高度不起作用

Select 标签的占位符

在 CSS 中使用多个 @font-face 规则

实用课程推荐

相关教程推荐