HTML/CSS -为什么我在div中的a:hover不能工作？
在HTML/CSS中，当我们在一个div元素中嵌套了一个a标签，并且希望在鼠标悬停在div上时改变a标签的样式，可能会遇到a:hover不起作用的情况。这是因为a:hover选择器只能应用于直接接触鼠标的元素，而div元素并不是一个直接接触鼠标的元素。
解决这个问题的方法有两种：
- 将
a标签设置为块级元素：将a标签的display属性设置为block或inline-block，这样a标签就会占据整个div元素的空间，从而可以接触到鼠标事件。示例代码如下：
<div>
<a href="#" style="display: block;">Link</a>
</div>- 使用JavaScript事件处理程序：通过JavaScript来监听
div元素的鼠标事件，并在事件触发时改变a标签的样式。示例代码如下：
<div onmouseover="changeStyle(this)">
<a href="#" id="link">Link</a>
</div>
<script>
function changeStyle(element) {
var link = element.querySelector("#link");
link.style.color = "red";
// 其他样式改变
}
</script>以上是解决div中的a:hover不起作用的两种常见方法。根据具体情况选择合适的方法来实现所需的效果。
关于HTML/CSS的更多内容，您可以参考腾讯云的相关文档和产品：
相关·内容
3回答
CSS鼠标悬停问题
html、css、hover、mousehover
我刚开始接触CSS，我面临着一个问题。当鼠标移动到输入框上时，我希望它后面的文本改变颜色。但是当鼠标在上面移动时，就会发生闪烁。
如何在不更改以下HTML结构的情况下解决闪烁问题？
.back:hover {
color: red;
}
.my-input {
position: absolute;
top: 0px;
opacity: 0.7;
height: 30px;
}
.my-input:hover {
pointer-events: none;
}
.my-input:focus {
opacity: 1;
}
<div>
&l
浏览 1提问于2020-01-02得票数 0
回答已采纳
3回答
用于在div之外悬停的Jquery
jquery
我知道这将在给定的id上生成一个hoverOver和hoverOut函数：
$(document).ready(function(){
$("#link").hover(
function(){
$("#div").css({"display":"block"});
},
function(){
$("#div").css({"display":"none"});
浏览 5提问于2016-05-21得票数 1
回答已采纳
1回答
文本从div出来，我只需要标题和数据应该增加他们的字体大小
angularjs
我只需要**只有数据和标题必须增加他们的字体大小**当我改变开关语句，但我不想增加右角的字体大小，我该怎么做呢
<!DOCTYPE html>
<html ng-app="myApp">
<head>
***emphasized text***
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&
浏览 0提问于2018-03-19得票数 0
1回答
在带有蒙面或反向SVG图标的元素上添加悬停效果
html、css、user-interface、svg
如何在作为SVG图标的元素上添加悬停效果，该元素还可以更改图标本身的颜色。
这是我现在有两个选项，使用掩码图像或显示图标作为背景。
在CSS中使用background的问题，在悬停时显示是正确的，但是我不能改变图标的颜色。
.icon {
display: inline-block;
background: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') no-repeat center; /* imagine the file here as an SVG file */
b
浏览 3提问于2022-06-09得票数 0
3回答
HTML，网页页脚部分的定制问题
html、css、python-3.x、streamlit
代码：(footer=“”和“”之间的代码包括html格式代码)
footer="""<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a:link , a:visited{
color: blue;
background-color: transparent;
text-decoration: underline;
}
浏览 9提问于2022-05-15得票数 2
回答已采纳
4回答
临时更改超链接颜色及其悬停时的颜色
javascript、html、jquery、css
我里面有一个DIV和一个A标签，就像这样：
<DIV CLASS="product"><A HREF="...">blah</A></DIV>
我想更改用户鼠标时的"A“文本颜色--在DIV上，所以我的CSS是：
.product a { color:blue; }
.product:hover a { color:red; }
作为CSS，可以工作。但是我正在创建一个“模板配置器”，我想向用户展示一个预览，使用jQuery动态更改颜色，如下所示：
$('.product a').css(&
浏览 7提问于2020-09-16得票数 1
回答已采纳
5回答
html5块链接样式设置问题
html、css、background-color
您好，HTML5 / css专家
我试图利用HTML5提供的一些“新”功能，但是我偶然发现了一个问题，当在标签内有块元素时，在悬停时改变我的链接背景。
这是我的测试代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>teeeest</title>
<link rel="stylesheet" href="saninetto1/css/bootstrap.min.css"
浏览 0提问于2012-07-31得票数 2
回答已采纳
2回答
我正在努力实现这一目标：
第1部分:在父div上悬停的，显示一个透明的信息图标。(请找到显示信息图标的图片)。
第2部分：下一步，虽然父div具有绿色背景并在透明信息图标的悬停中高亮显示，但我需要将其更改为活动信息图标。(显示鼠标在信息图标上盘旋。请看图片)。
我能够实现第1部分。但是，在第2部分中有问题，在这里悬停在显示的普通信息图标上不会用我的CSS激活活动图标。对于如何做到这一点，有什么建议吗？
以下是我迄今所尝试过的。下面是Html：
<div>
<div id="parent">
<span class
浏览 3提问于2021-09-10得票数 0
3回答
如何修复W3Schools默认导航栏并使其正常工作？
css、html
我要做的是创建一个导航栏。除了CSS部分，我已经从W3Schools得到了这些代码。
@font-face {
font-family: "Yeezy";
src: url("../static/yeezy.ttf");
}
* {
font-family: "Yeezy";
font-weight: bold;
color: #dbdbdb !important;
}
html,
body {
height: 900px;
background-size: cover;
background-image:
浏览 1提问于2018-03-30得票数 0
1回答
Display: block / Display: none on element:hover not working
html、css、hover、mouseover、display
我正在尝试根据鼠标悬停在位于documnet的其他位置的link元素上显示和隐藏带有一些文本的div：
HTML：
<ul class="black-white one-on-two" id="hidden-menu">
<li><a id="showhim" href="#">SHOW HIM?</a></li>
<li><a href="#">HOW?</a></li&g
浏览 0提问于2020-10-16得票数 0
3回答
jquery如何在悬停时仅更改一个父级
jquery、hover、parent
当我将鼠标悬停在<p>标签上时，我只想更改一个父级。代码是：
$('.hover').each(function () {
$(this).parent().hover(function () {
$('p').parent(this).css('font-size','30px');
}, function () {
$('p').parent(this).css('font-size','10px'
浏览 1提问于2012-09-13得票数 5
2回答
如何使用jquery在左右悬停时对图像序列进行动画处理？
javascript、jquery、css
我在jquery是新手，我想在我的首页上包括一些设计。但是我找不到任何好的资源或例子，我该怎么做呢？
我有一组按顺序拍摄的图像。这个图像就像一个跳跃的球。现在我有了一个链接或锚标签。我想要的是当用户向右移动鼠标时。图像序列将递增，这意味着如果我有一个像这样的图像，那么下一个是bal2.jpg，依此类推。如果鼠标悬停在左边，它将递减到第一张图像，即will 1.jpg。
我有这个简单的代码。
<div id="image_container">
<!-- should be replace if hovering -->
&l
浏览 2提问于2014-04-30得票数 0
4回答
jQuery:如何实现这种推出效果？
javascript、jquery
我需要一些帮助来实现这个翻转/移出效果。
这是屏幕截图：
我有菜单。当我将鼠标悬停在" products“项上时，弹出框就会出现在它的下方，并带有一个包含所有产品的树。
<div id="menu">
<div id="product"> Roll over here </div>
...
</div>
<div id="popup">
<div> <a> link </a> </div>
<div&g
浏览 2提问于2010-08-24得票数 2
回答已采纳
2回答
Vuetify:向v-btn添加自定义悬停样式
javascript、vue.js、vuetify.js
我是Vuetify的初学者。我想在我的网站上创建一个按钮，如下所示： <v-btn class="v-btn white--text mx-1 px-6" elevation="2" x-small rounded color="#BB86FC">text</v-btn> 我还将<v-hover>标签添加到我的代码中： <v-hover>
<v-btn class="white--text mx-1 px-6" elevation="2" x-small
浏览 49提问于2021-04-11得票数 2
回答已采纳
5回答
当鼠标移动芒果时，我想用绿色的苹果代替红色的芒果。
css、html、hover
强文本这是我的html代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two"&
浏览 4提问于2016-08-11得票数 0
回答已采纳
11回答
CSS鼠标悬停与JavaScript鼠标悬停
javascript、css
有时候，我可以选择使用CSS元素:hover或JavaScript onmouseover来控制页面上html元素的外观。考虑以下场景，其中div包装输入
<div>
<input id="input">
</div>
当鼠标光标悬停在div上时，我希望输入改变背景颜色。CSS方法是
<style>
input {background-color:White;}
div:hover input {background-color:Blue;}
</style>
<div><input>
浏览 4提问于2009-03-04得票数 86
回答已采纳
2回答
jQuery显示函数不起作用
jquery、show-hide
我试图简单地从隐藏的导航div开始，然后当鼠标悬停在它们上面时显示它们。
我曾尝试将.hover函数与.show()、.hide和.toggle一起使用。我还尝试了mouseeneter和mouseleave函数以及show和hide函数以及切换函数。
真正奇怪的是，我可以让它反向工作。我可以让它隐藏在鼠标上方，并在鼠标退出时显示，尽管当鼠标在div中时，它确实会闪烁。
这是html和jQuery：
<html>
<head><title>Divs</title>
<link rel="stylesheet" t
浏览 0提问于2012-07-21得票数 0
回答已采纳
1回答
当我悬停img标签以在其下方显示文本时，如何制作动画
javascript、html、css
我需要使动画时，我悬停img标签，以显示他下面的文本(必须是动画显示文本，缓慢)，但这还不是全部，它还必须移动其他内容时，文本显示，并返回当文本消失(当不是悬停)。非常重要的显示文本必须是动画和返回。我不关心它是否与jq或css一起工作，或者两者都需要工作。我是一个初学者，所以可能很明显我就是看不出来。 HTML： <div class="first-block"></div>
<div class="secend-block">
<div class="box">
浏览 13提问于2020-04-01得票数 0
回答已采纳
3回答
高级兄弟姐妹选择器
javascript、jquery、html、css
我不太明白这件事。我有以下构造：
<div class="container">
for n = 0 to ...
<a href="some url">Link n</a>
endfor
for each link in ".container"
<div class="poptip"></div>
endfor
</div>
例如：
<div class="con
浏览 6提问于2015-08-31得票数 0
回答已采纳
3回答
文本鼠标悬停时的图像边框
javascript、jquery、html、css
我有三个相邻的产品块。每一个都有一个图像和下面的名字。我想做的是，当你将鼠标悬停在文本上时，它会在图像的底部显示一个边框。我为图像悬停设置了一个样式，当我将鼠标悬停在图像上时，它会起作用，但当我将鼠标悬停在文本上时，它就不起作用了。
。
还有我拥有的HTML：
<div class="container-product-row">
<ul class="variations">
<li>
<a href="#"><img src="../
浏览 2提问于2012-12-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
