仅使用CSS,将鼠标悬停在<a>上
悬停<a>标签上的鼠标通常用于触发链接，但也可以用于其他用途。例如，在悬停时，可以使用CSS样式来改变链接的样式。以下是一些示例CSS代码，可以在悬停时改变链接的样式：
a:hover {
color: red;
font-weight: bold;
}在这个例子中，当鼠标悬停在链接上时，链接的颜色将变为红色，并且字体粗细将更改为粗体。
您也可以使用其他CSS属性来改变链接的样式，例如：
a:hover {
background-color: yellow;
text-decoration: underline;
}在这个例子中，当鼠标悬停在链接上时，链接的背景颜色将变为黄色，并且文本装饰将变为下划线。
希望这些示例CSS代码可以帮助您更好地理解如何在悬停时改变链接的样式。
相关·内容
我想设置list z-index。
当鼠标悬停在列表上时。
此列表显示在<p>文本上方
下面是简单的html和css。
<style>
ul li{
display:none;
}
ul:hover li{
display:block;
z-index:-1;
}
</style>
<ul><h3>This is LIST</h3>
<li>back</li>
<li>forword</li>
<li>click</li>
&
浏览 1提问于2013-09-01得票数 2
因此，在我的网站上，我创建了一个功能，当我将鼠标悬停在其中一个侧边按钮上时，中间的树的图像会发生变化。您可以看到页面
动画运行正常，但现在我正在尝试使背景图像在div中响应。多亏了这另一个，我能够使用下面的CSS使原始背景图像做出响应：
#arvore {
background: url('http://vistacamisa.greenpeace.org.br/wp-content/uploads/2015/09/arvore_011.png');
background-size: contain;
background-repeat: no-repeat;
width:
浏览 2提问于2015-09-16得票数 0
2回答
我需要显示一个额外的图像，一旦用户悬停在按钮上。理想情况下，如果只使用CSS，你会怎么做呢？
您可以在下面的图像中看到我所需要的内容，当用户将鼠标悬停在宣传册按钮上时，视图宣传册按钮就会出现。
浏览 1提问于2011-04-20得票数 3
回答已采纳
1回答
在此处使用suckerfish下拉菜单：
客户端在IE7 Vista中看不到下拉列表(将鼠标悬停在“关于我们”上)。我无法在我这一端重现这个问题。
我非常了解CSS，但是我被难住了。有什么建议吗？
浏览 3提问于2009-12-02得票数 0
1回答
有没有可能在图像上保持CSS悬停效果，即使在它上面显示了一个新的图层？
例如，我有这样一个CSS：
#rit{
background: url(images/rits.png) no-repeat;
height: 295px;
}
#rit:hover{
background: url(images/rits_h.png) no-repeat;
height: 295px;
}
...and，然后一些单独的CSS添加了一个‘查看更多’按钮。当我将鼠标悬停在“阅读更多”按钮上时，上面CSS的效果就消失了。
浏览 2提问于2013-11-06得票数 1
1回答
我想让用户能够查看我开发的网站的完整屏幕截图，然后当他们将鼠标悬停在它上面时，另一个div会淡入一些元信息。
这是一个测试链接-
正如你所看到的，如果你将鼠标悬停在幻灯片上，覆盖图就会出现，但当你将鼠标悬停在幻灯片上，下一张幻灯片开始播放时，覆盖图在不应该出现的时候是可见的。
如果任何人有任何想法的问题是什么，那将是伟大的！
谢谢
编辑:以下是相关代码
$(function(){
$('#slideshow').hover(
function(){
$('.slideimage').fadeOut(100, function()
浏览 1提问于2012-02-17得票数 0
回答已采纳
当我将鼠标悬停在<tr>上时，<a>元素的颜色应该变为白色。
我在jQuery上尝试过这样的东西：
<script>
$('tr').hover(function(){
$('a').css('color','white');
});
</script>
但这会更改所有<tr>的文本颜色。有什么想法吗？
浏览 0提问于2012-07-06得票数 0
4回答
我使用CSS样式悬停在我的页面上的一些图像链接。
当用户将鼠标悬停在图像上时，它的背景位置会发生变化，从而提供高亮效果。
当我将鼠标悬停在i.6中的图像上时，我的页面被下推了40px。
为什么会这样呢？
浏览 0提问于2009-12-15得票数 0
回答已采纳
2回答
Web :背景眨眼
、、、
我必须根据鼠标悬停事件改变背景图像。
$("#videoLanceur").mouseenter(function() {
$("body#homebg").css("background-image", "url(img/home-labtop-clean-playerhovered.jpg)");
})
$("#videoLanceur").mouseleave(function() {
$("body#homebg").css("background-image"
浏览 1提问于2014-08-11得票数 1
回答已采纳
1回答
我已经创建了3个带有文本的图标，你可以在这里看到代码
问题是，如果你将鼠标悬停在图标上，只有图标变红，文本保持灰色，但如果你先将鼠标悬停在文本上，那么图标和文本都会变红。
我的目标是让文本和图标同时变红，无论你首先将鼠标悬停在哪里，我都不知道怎么做。
我是HTML/CSS新手
浏览 1提问于2014-03-01得票数 1
2回答
我需要一些CSS动画的帮助。我怎么才能让这个只用CSS。因此，当我将鼠标悬停在krab div上时，css动画将启动，并在我悬停时切换图像(vws02.png比vws01.png比vws02.png)。
浏览 4提问于2011-10-28得票数 1
3回答
在悬停时交换多个图像
、、、
嗨，伙计们，我一直在寻找这个答案，我的头很痛。
我有一个包含团队成员图像的页面，我希望当您将鼠标悬停在每个图像上时，会出现该团队成员的另一个图像。很简单，我可以用css为每个成员做这件事，但我想知道是否有一种方法可以使用query，这样它就可以通过文件的名称来完成，例如dan.jp和dan-hover.jpg。
谢谢
丹
编辑:我也希望它是这样的，当您悬停在图像上时，原始图像将替换其他图像，因此新图像仅在鼠标悬停在图像上时出现。
浏览 0提问于2011-10-05得票数 1
当我将鼠标悬停在父div上时，我尝试触发div悬停效果
<div class="card">
<div class="photo-container">
<img class="card-img-top img-fluid photo" src="img/jay.png" alt="Card image cap">
</div>
<div class="card-block">
&l
浏览 0提问于2016-10-20得票数 1
2回答
网址：
使用IE (9或更低版本)，当将鼠标悬停在主页上的任何菜单上并尝试选择项目2+时，例如:将鼠标悬停在商店上并尝试单击画笔或护发，该菜单将消失。
我怀疑这是由于我的幻灯片内容，然而我尝试过的所有东西(CSS hacks和JS更改)都不能让菜单正常工作，而且在FF、Chrome和Safari上也是如此。
有没有什么特别的IE补丁可以解决这个问题，或者是我错过了一个CSS hack？
编辑:我已经更新了Justus的CSS fiddle，以包含没有不相关的代码- 的幻灯片内容。请随意使用它，只需查找IE的问题所在。主要是IE9。
浏览 0提问于2012-10-03得票数 0
我有问题，只有在主页上的菜单。
当我将鼠标悬停在“更换部件”类别上时，下拉菜单完美地停留在滑块上，而不是文本内容上。我不知道如何修复CSS。
请帮帮我！
谢谢
浏览 0提问于2017-03-10得票数 1
我正在为一家公司的这个网站工作，我在IE8中的CSS遇到了问题，当你将鼠标悬停在导航选项卡上时，它允许出现子菜单。
当您将鼠标悬停在导航中的一些菜单项上时，应该会出现一个子菜单。这在IE8中不起作用，但在IE以外的所有其他浏览器中都能起作用。
在让这些样式在IE8中工作方面的任何帮助都是非常感谢的。
浏览 5提问于2011-04-29得票数 0
回答已采纳
2回答
我有一个问题，我想选择一个在div中的文本，这是jsfiddle
html：
<div id="connect">some text some text: <div id="select" onmouseover="this.focus();this.select();">when you hover over therer, it gets selected</div></div>
CSS：
#connect {
resize: none;
font-family: 'U
浏览 3提问于2014-07-21得票数 0
4回答
我现在正面临着一个奇怪的bug，涉及到javascript。我使用jquery ui标签在我的网站中动态添加和删除标签，标签的内容包含两个按钮，当鼠标悬停在底部的相关链接的左侧时，这两个按钮会消失并在鼠标左键上可见。鼠标悬停在第一个默认选项卡上运行良好，但不适用于动态添加的选项卡。当我将鼠标移到新选项卡的内容上时，效果不会发生。这是一把小提琴
此小提琴与我的结果不完全相同，也不包含我的问题，因此请正确阅读我上面的声明，因为我已经解释了我使用以下鼠标悬停代码的问题
$("#butt").mouseenter(function () {
$("#bu
浏览 0提问于2013-02-28得票数 0
回答已采纳
目前，我的代码被设置为当我将鼠标悬停在3个单独的磁贴上时改变背景颜色。到目前为止，它的工作与预期的一样，但当我试图更改div的背景图像时，什么也没有发生。
附注：我是一个完全的初学者，到目前为止我正在尝试代码，我意识到我应该创建变量/函数，以避免回调地狱
$("#basecamp-background").mouseover(function(){
$("body").css("background-color", "red", function(){
$(".dashboard").css("
浏览 19提问于2019-07-21得票数 0
1回答
如何使对象在悬停在图像上时出现
、、、、
我有个问题。我试图在Wordpress中编辑我的代码，但遇到了一个问题。我希望在将鼠标悬停在滑块图像上时显示对象(左/右导航)。请在此处查看网站: pxljar.com/word
因此，基本上，左/右导航箭头应该仅在将鼠标悬停在滑块上的图像上时可见。
感谢所有的帮助。
谢谢。
浏览 2提问于2013-05-16得票数 0
当我将鼠标悬停在一个元素上时，所有这些元素都会突出显示，以下是我的代码：
$(document).ready(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","transparent");
浏览 0提问于2011-07-20得票数 0
回答已采纳
1回答
我正在尝试用html和CSS制作一个组合框，其中每一项都在单独的一行上，当你将鼠标移到它上面时，每一行都会亮起蓝色，就像在Google上一样。这一点很简单。我有一个带有链接的div (a)，每个链接都使用CSS中的display:block填充整个div。然后我给悬停在上面的那个添加了一个虚线轮廓，这就是事情变得奇怪的地方。
这是。
如果你将鼠标悬停在顶部的链接上，你可以看到它正在工作，但其他链接似乎没有显示出轮廓……下面的第二个只在底部可见，但其他的根本看不到。
任何帮助都将不胜感激。
编辑:我在Windows XP上的IE8中
浏览 0提问于2012-11-07得票数 1
回答已采纳
使用IE和下面的HTML，如果我把鼠标悬停在单词"Test“上，我不能让输入的背景变成红色。但是，如果我将鼠标悬停在单词"Test“右侧的区域上，但仍在input元素的范围内，它将变为红色。这在Firefox或Chrome中是不会发生的。什么是正确的方式来定义我的样式，使其在IE中正常工作？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&
浏览 0提问于2011-03-08得票数 6
1回答
将鼠标悬停在锚点上时，我正在尝试显示子菜单。我尝试过.expand:hover ~ .submenu或.expand:hover + .submenu，但它们似乎不起作用，因为锚点不是子菜单的直接兄弟项。我必须将鼠标悬停在特定的li锚上，是否有一种HTML/CSS方式可以做到这一点。我知道我可以使用JS来解决这个问题，但是有HTML/CSS方法吗？
.menu {
display: block;
}
.menu-item {
list-style-type: none;
}
.menu-item a {
text-decoration: none;
font-size:
浏览 0提问于2019-04-10得票数 0
4回答
当我悬停图像或其上方的<p>时，我需要更改图像的不透明度。这是html结构。
<div id="article-menu">
<ul>
<p>Image</p>
<li><img src="..." /></li>
</ul>
</div>
jQuery
$("#article-menu img, #article-menu p").hover(function() {
$(this).clo
浏览 0提问于2013-05-02得票数 3
有没有办法覆盖另一个css?！例如，我的搜索栏在购物车的顶部，如果我偶然将鼠标悬停在搜索栏上，那么我的购物车就会消失，因为它是最顶层/第一层。这是一张图片。在CSS中，购物车是第一层而不是第二层，有没有办法解决这个问题？提前感谢！
浏览 0提问于2013-07-09得票数 0
回答已采纳
我有一个包含几行的html表，我包含了一个jquery函数，如下所示
$('tr').mouseover(function() {
$(this).addClass('row_over');
});
因此，将鼠标悬停在该特定行的css类上时，会发生更改。然后我使用jquery添加了另一行，但是鼠标悬停函数在动态添加的行上不起作用，鼠标悬停函数在除了这个新的行之外的所有行上都起作用。
请帮我解决这个问题
谢谢
浏览 1提问于2010-07-26得票数 1
回答已采纳
1回答
如何使div在鼠标悬停后不再停留？例如，我将鼠标悬停在一个div上，然后出现另一个div。当我试图将鼠标悬停在刚刚取消遮盖的div上时，它消失了，因为我不是".mouseenter-ing“，也就是原始的div。
这是我的代码：
$(document).ready(function() {
$(".panel").hide();
$("body").fadeIn(1800);
$(".starter").mouseover(function() {
$(
浏览 0提问于2017-06-18得票数 1
每当你在侧边栏的列表项上悬停时，我想在列表项中放置一个3d曲线外观。
我该如何使用css来做到这一点呢？
编辑：：
我在一个小吧台里有一份清单。
当我将鼠标悬停在链接上时，我希望它看起来就像是写在圆柱体的曲面上
浏览 1提问于2009-11-12得票数 0
回答已采纳
1回答
我有两个div
<div id="hm-sp-lenovo-wr">
.......
<div id="hm-sp-motorola-wr">
.......
在我的css中，我有
#hm-sp-lenovo-wr:hover { cursor: pointer }
#hm-sp-motorola-wr:hover { cursor: pointer }
但是当我将鼠标悬停在div上时，没有指针出现，....i只是想让用户知道div是可以点击的……
这是指向....look的链接，位于flash滑块的正下方
有什么想法吗？
浏览 0提问于2011-08-19得票数 1
回答已采纳
我做了一个水平展开的按钮：
然而，我很难让我的按钮的悬停状态正常工作。
这是我的标记：
<a class="action-button" href="#"><span>Some text</span></a>
我不知道如何设置悬停效果的样式，这样当用户将鼠标悬停在<span>未覆盖的按钮上时，整个按钮就会“亮起”。
这是当我将鼠标悬停在<span>未覆盖的按钮上时得到的结果：
在这里查看我的示例：
浏览 0提问于2011-12-11得票数 1
回答已采纳
2回答
这可能是我遇到的一个简单的问题，但对于我的生活来说，我似乎无法解决这个问题。如果你们中的任何人能帮助我，我将不胜感激。
我使用JQuery在用户将鼠标悬停在某个div上时显示一个菜单。菜单将显示在div的左上角。我让它工作了，但是当我尝试点击出现的div的菜单项时，div再次消失，因为从技术上讲，鼠标不是在div上，而是在菜单上。
在下面的示例中，"#blockMenu“是动态出现的菜单。我将当前的div ($this)淡出一点，以强调菜单。
我使用以下代码来实现这一点：
$("div.editable").hover(function () {
$(this)
浏览 0提问于2011-07-10得票数 1
我刚接触html和css，我想知道如何创建一个有选项的下拉式img/box。这是我所说的一个例子。
在本例中，当您将鼠标悬停在社区按钮上时，您将获得一个选项列表。在css中有没有实现这一点的方法？
提前谢谢。
浏览 0提问于2012-08-16得票数 0
我想知道如何设置css伪类，特别是当我将鼠标悬停在一个元素上时，比如一个带有id的div，另一个带有id的div的属性会发生变化吗？
所以通常是这样的：
#3dstack:hover {
listed properties
}
我不确定会有什么变化，让它停留在带有id 3dstack的div上，并让它更改另一个div。
浏览 1提问于2012-03-20得票数 4
回答已采纳
3回答
当有人将鼠标悬停在地图图像上时，我想使用195x29的图像来代替手。我正在尝试使用css，但如果没有可用的css选项，我会考虑使用javascript选项。我已经尝试了几个不同的css选项，但无法获得我想要的结果。目前，我的css代码设置为：
#docmap {float:left;width:620px;height:225px;}
.click a:hover {cursor:url(images/click.png) no-repeat !important;}
我的html是：
<div id="docmap" class="click">&
浏览 2提问于2013-02-27得票数 0
2回答
我有一个想要添加悬停和单击事件的菜单。 $('a').hover(function(){
$(this).css('background', 'red');
}, function(){
$(this).css('background', '');
});
$('a').click(function(){
$(this).css('background', 'green');
}); 下面是演示：https://jsfiddle.net/u
浏览 15提问于2019-10-10得票数 0
我有一个由Javascript创建的html页面内的表格，并在它的单元格内持有数字，我想放大数字时，鼠标悬停在它上面使用css样式。
浏览 2提问于2011-03-30得票数 1
回答已采纳
这是我的CSS中的类.............
我使用的是ASP.NET 2.0和jQuery..........
#ImageBoxNextImage:hover
{
background-image: url(http://www.eRate.co.za/jquery/imagebox/next_image.jpg);
background-repeat: no-repeat;
background-position: right bottom;
}
只有当我将鼠标悬停在我的项目上时，它才会显示Next_Image.jpg。除了悬停之外，我还可以使用哪些其他选项。我希望图像始终存在，
浏览 1提问于2009-06-07得票数 0
回答已采纳
我有图像A和图像B，它们位于页面上的不同位置。当鼠标悬停在图像A上时，会附加一个css动画。当鼠标悬停在图像A上时，我想为图像B附加和触发相同的动画。我应该更好地使用jQuery吗？如果是jQuery，那么如何在元素上触发css动画？
浏览 2提问于2012-04-02得票数 0
回答已采纳
4回答
当前，当我将鼠标悬停在div上时，我正在将以下css应用于div：
border-bottom: 10px solid;
问题是，div中包含的所有文本都向上移动了10 by。我怎样才能防止这种情况发生呢？
编辑
它需要与IE8+兼容
浏览 8提问于2015-02-27得票数 1
回答已采纳
当用户将鼠标悬停在菜单项上时，我尝试使用jQuery在导航上进行图像交换。它需要根据元素的高度加载不同的图像。
到目前为止，我有这样的想法，在某种程度上是有效的：
$(document).ready(function() {
$('a.mainlevel').hover(function() {
if ($(this).height() > 15) {
$('a.mainlevel').mouseenter(function() {
$('a.mainlevel:hov
浏览 1提问于2012-04-03得票数 1
我在同一个类的页面上有10个元素。
当我将鼠标悬停在其中一个上时，我想要更改其他九个。
这是我目前所掌握的.
$("*[class='myClass']:not(this)").css({"top":"10px"});
有什么想法吗？
浏览 2提问于2012-11-29得票数 4
回答已采纳
3回答
我遇到了一个有趣的jquery问题。基本上，当我将鼠标悬停在另一个父菜单上以显示子菜单时，我需要一个粘性的子菜单来隐藏，然后当我没有悬停在具有子菜单的另一个父菜单上时，它会重新出现。这一切都很好，问题是当我将鼠标悬停在粘性子菜单中的孩子li上时，子菜单会翻转，在显示和不显示之间闪烁。看来我的jquery被孩子li继承了？不管怎样，下面是代码：
CSS
.current-menu-parent ul{
display:block;
position:absolute;
}
#primary-nav ul li:hover ul {
display:inline;
position
浏览 0提问于2012-07-11得票数 0
回答已采纳
当我将鼠标悬停在排列在该选框中的图像上时，是否可以停止或启动html选框？
当鼠标悬停在全选框div时，选取框停止。但是我想让它在悬停在这个选框中的图像上时停止？
浏览 0提问于2013-09-10得票数 0
我在上有一个多级下拉菜单。如果您将鼠标悬停在Properties上，您将看到第一个下拉菜单，其中包括商业和开发。但当你将鼠标悬停在商业广告上时，你会看到下一级的活动和售出都在右边。我右键单击该面板并选择inspect element，但无法确定需要在css中进行哪些更改才能使其移动到第一个下拉菜单中。任何帮助都将不胜感激。谢谢
浏览 0提问于2016-04-03得票数 0
我正在使用SceneBuilder在JavaFX中开发一个应用程序，我想添加一个CSS代码，当我将鼠标悬停在按钮上时会显示标签，我尝试过：
.label
{
-fx-text-fill: transparent;
}
.button:hover ~ .label
{
-fx-text-fill: black;
}
所有的元素都在同一个容器中。所以我的问题是我如何影响使用按钮的标签？
浏览 0提问于2021-02-23得票数 0
我有一个表格，当我将鼠标悬停在表格中的单元格上时，当前单元格和第一列将突出显示：
$('.price_cell').hover(function(){
$(this).css('background-color','#cce6ff');
$('td:first', $(this).parents('tr')).css({'background-color':'#0096E1','color':'#ffffff'});
},
func
浏览 1提问于2011-04-18得票数 1
回答已采纳
2回答
我创建了一个工具提示div，当鼠标悬停在菜单按钮上时，工具提示就会出现，当你鼠标悬停在按钮上时，工具提示就会出现，当你鼠标移出时，工具提示就会消失，但我想要能够滚动到子菜单(这里是#submenu.Solutions)，我不知道该怎么做，我试着设置一个超时和一个变量来查看是否有鼠标悬停在子菜单上，但它就是出了问题。
我最近添加了mousemove，看看我是否可以在宽度和高度上做些什么，但我有点困惑。所以我就把它放在那里让你看看。
$('#btnSolutions').mouseover(function() {
$('#btnSolutions').cs
浏览 5提问于2012-11-11得票数 0
回答已采纳
据我所知，CSS可以用来以一种基本的方式改变:hover上元素的内容。我正在使用这个代码
HTML：
<button><span>3 replies</span></button>
CSS：
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
但是当我将鼠标悬停在按钮上时，它就会剧烈地抽动。
我希望我的能像的音乐播放器一样流畅
当您将鼠标悬停在lease、premium或trackout价格下的某个按钮
浏览 31提问于2013-03-18得票数 2
我有一个标题的链接，如下所示：
<a href="#">Cat<span class="more">See More</span></a>
你看，我有里面为了流“看更多”到右边，所以我有下面的css
.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover {text-decoration:underline;}
我希望当我将鼠标悬停在文本"Cat“上时，"See More”会加下划线，但它在IE/
浏览 0提问于2012-01-13得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
