元素悬停时可见，但单击时不可见
，通常是通过CSS中的:hover伪类来实现。当鼠标悬停在一个元素上时，可以通过:hover伪类来改变元素的样式，从而使其在悬停状态下可见。但是，当鼠标单击该元素时，通常会触发其他事件或导航到其他页面，此时需要通过JavaScript或其他编程语言来控制元素的可见性。
这种效果在前端开发中经常使用，特别是在创建交互式用户界面时。例如，当用户将鼠标悬停在一个按钮上时，按钮可能会改变颜色或显示其他提示信息，以吸引用户的注意力。但是，当用户单击按钮时，可能会触发一个表单提交事件或执行其他操作，此时按钮可能会消失或导航到其他页面。
在实现这种效果时，可以使用CSS的:hover伪类来设置元素在悬停状态下的样式，例如改变背景颜色、字体颜色等。同时，可以使用JavaScript来监听元素的点击事件，并在点击时控制元素的可见性，例如通过添加或移除CSS类来隐藏或显示元素。
腾讯云提供了丰富的云计算产品和服务，其中与前端开发相关的产品包括腾讯云CDN（内容分发网络）和腾讯云Web应用防火墙（WAF）。腾讯云CDN可以加速静态资源的传输，提高网页加载速度，而腾讯云WAF可以保护网站免受常见的Web攻击。
关于元素悬停时可见，但单击时不可见的具体实现方法和代码示例，可以参考以下链接：
相关·内容
3回答
鼠标移动时如何使图像改变颜色？
javascript、html、css
首先，为这个奇怪的标题感到抱歉，我真的不知道有什么更好的方法来描述它。
基本上，我希望当鼠标在上面移动(悬停)时，图像改变颜色，但是当鼠标还在的时候，它就停止了，
当鼠标静止时，颜色不变，
当鼠标移动时，颜色发生变化.
我知道CSS中有一个悬停属性，但是它只有两个状态，当鼠标悬停在它上面时，当它不是的时候，我要寻找的是一些更棘手的东西。
希望这就解释了:/
浏览 1提问于2016-07-31得票数 0
回答已采纳
悬停不起作用。我在Firefox19.0，Cometbird 11.0，Explorer9上进行了测试。
我测试过的唯一可以正常工作的浏览器是Chrome25。
这段代码是做什么的？
首先，当鼠标悬停在元素#wrap_req上时，它将调用一个函数，该函数告诉您在#wrap_req中添加html内容。
<span id='cancelReq' ></span>
然后，当鼠标悬停在#cancelReq元素上时，该元素的背景必须更改。
<script language="JavaScript">
function mOver
浏览 0提问于2013-03-01得票数 2
2回答
按钮悬停颜色
asp.net、html、css
为清晰起见，在解析后进行编辑。
我想将按钮上方的悬停颜色从默认的蓝色更改为另一种颜色。我想做到这一点，而不必完全重新定义所有的CSS的按钮。我只想覆盖悬停颜色，保留其余的默认值。
图片：
通常，它是这样的：
悬停，是这样的：
我想要更改悬停时的突出显示颜色。
编辑：
已经尝试过：
.Cancel:hover
{
background: linear-gradient(black, white); //Tried these separately
background-color:Red;
}
和按钮标记：
<asp:Button I
浏览 3提问于2013-03-05得票数 0
回答已采纳
4回答
CSS/HTML Active/Hover (Active不工作)
html、css、hover
嘿，
我有一个问题，我必须为一个项目制作一个网页，我不是一个有经验的程序员或web开发人员，我对活动CSS有问题。
这样做的目的是，当我将鼠标悬停在侧菜单上时，它会改变颜色，当我点击鼠标时，它的颜色将与悬停颜色保持不变，当我将鼠标悬停在侧菜单选项卡(合作伙伴)上时，悬停部分会工作，但当我单击它时，颜色不会改变--当鼠标离开侧菜单选项卡时，它就会消失。
这是我的代码，我希望有人能帮助我，我知道这是一个混乱的代码。CSS：
.buttonPartners a:hover{
background: -webkit-gradient(linear, right bottom, left top
浏览 6提问于2014-01-02得票数 0
回答已采纳
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
回答已采纳
3回答
如何使用css焦点？
html、css、hover
我熟悉使用css和“悬停”功能，但我对如何使用点击功能很感兴趣。
因此，首先要使用悬停功能，您可以拥有：
#test {
background: black;
height: 100px;
width: 100px;
}
然后当鼠标“悬停”在上方时，我希望它变成白色
#test:hover {
background: white;
height: 100px;
width: 100px;
}
那么，在点击时改变背景的方式也是类似的吗？
谢谢!
詹姆斯
浏览 1提问于2011-11-10得票数 0
2回答
CSS:如何在导航菜单中保留选中的图像
html、css
我正在尝试更改图像按钮，当用户在导航菜单上选择时，即:当用户悬停时，它将改变按钮颜色(我可以这样做OK)，按钮效果将一直保持到用户选择按钮(这我不能做)。
我尝试使用"current“或"select”元素，但它不起作用。有什么建议吗？
我也在想，在构建导航菜单时，是使用"div“标签更好，还是使用"li”标签更好？
到目前为止，HTML看起来像这样：
<body>
<div class="menuBar">
<div class="home"> <a href="#.p
浏览 1提问于2013-06-18得票数 0
5回答
Bootstrap Button CSS更改无效:活动选择器
css、twitter-bootstrap、twitter-bootstrap-3
我使用的是bootstrap 3.3.7按钮，并且希望当鼠标聚焦、悬停或单击时，该按钮保持相同的颜色。 <button class="btn btn-default delete-btn">Delete</button> 下面是我修改CSS选择器的背景颜色的地方： .delete-btn:hover, .delete-btn:focus, .delete-btn:active {
background-color: white;
} 这适用于焦点或悬停事件。 但是，当鼠标单击该按钮时，它将更改为默认的灰色。你知道我在这里遗漏了什么吗？抓我的头.
浏览 42提问于2017-01-21得票数 1
回答已采纳
3回答
jQuery:仅在当前类选择器下找不到标记
jquery、jquery-selectors
我有这个：
HTML：
<p class="Link"><a href="...">Test1</a></p>
<p class="Link"><a href="...">Test2</a></p>
<p class="Link"><a href="...">Test3</a></p>
jQuery
$(document).ready(function()
浏览 2提问于2010-07-21得票数 2
回答已采纳
5回答
jQuery更改悬停在颜色上，然后返回原来的颜色
javascript、jquery、css、colors、hover
我在一个页面上有一些按钮，它的颜色是通过jQuery改变的，说明哪个按钮是活动的。我只想在悬停时添加一个颜色更改，然后它在离开时返回到原始颜色(这是由jQuery决定的)。
我第一次使用css：.showlink li:hover {color:#aaa;}，它可以正常工作，但当页面切换和jQuery改变颜色时，它就会取代CSS。
然后，我决定使用简单的jQuery，即当某物悬停时，改变它的颜色。这并不完全有效，因为它永久地改变了颜色。为了减轻这一点，我在函数中添加了一点，该函数将其返回到不同的颜色。
，我有什么方法可以把它恢复到原来的颜色，在悬停时它被改变了吗？
// Changes col
浏览 9提问于2011-07-26得票数 4
回答已采纳
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
回答已采纳
3回答
如何设置鼠标离开元素时的转换(悬停)？
html、css、css-transitions
我有多重在产品的形式，改变他们的图像在悬停到另一个图像。当悬停时，过渡是平稳的，使用ease-in-out需要0.3秒。然而，当鼠标离开元素时，转换是突然的，并且它会立即发生变化。如何在鼠标离开的情况下使转换工作正常进行？
CSS:
.my-reveal .hidden {
display: block !important;
visibility: visible !important;
}
.product:hover .reveal img {
opacity: 1;
}
.my-reveal {
position: relative;
}
.my
浏览 2提问于2017-02-17得票数 0
回答已采纳
2回答
我有一个按钮div，其中包含两个子div元素。一个具有count类，另一个具有caption类。
如果我不为.count类设置颜色，则按钮悬停样式(白色)将应用于count。但是，如果我在.count类中设置了颜色，则按钮悬停，就不再适用于count类/div。我可以为count定义一个悬停样式，但是它只适用于光标在计数上移动时，而不是整个按钮。我如何为count类设置特定的颜色，但当鼠标悬停在按钮上时，它的颜色仍然会改变(到按钮的悬停颜色)？
样本代码：
.button {
margin: 8px;
padding: 4px;
border: 1px solid black;
浏览 3提问于2021-04-25得票数 0
回答已采纳
3回答
悬停效应在css中的应用
html、css
我有一个react应用程序，它包含带有下拉列表的select。我想应用样式的两个状态:当鼠标悬停下拉项目和下拉项目是焦点。
.select__option.select__option--is-focused {
background: blue;
}
.select__option:hover {
background: gray;
}
这两种风格都有效。如果用户将使用键盘箭头(上/下)在下拉列表中导航，则将在项目上应用blue颜色，如果他将该项目悬停，则将该项目作为背景应用gray颜色。
发布：当用户悬停具有blue背景的聚焦项时，悬停颜色会覆盖blue，但即使悬停在聚焦
浏览 5提问于2021-12-06得票数 0
1回答
我们公司计划使用腾讯云的产品？
免费套餐、云数据库 Redis
我们公司计划使用腾讯云的产品，想体验的产品有主机、slb、redis、mysql 这些都有吗？可以免费体验吗？可以体验多长时间？
浏览 251提问于2017-12-08
2回答
为什么通过JavaScript改变样式会受到CSS转换的影响？
javascript、html、css、css-transitions
单击按钮时，我只是简单地更改了按钮的color和background-color。
<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>
此按钮的 CSS 包含color和background-color的CSS转换，但是，在:hover伪元素上，我没有添加任何样式，也没有更改颜色。
#myButton{
color:#3399FF;
background-color:#FFFFFF;
/
浏览 1提问于2013-03-15得票数 1
回答已采纳
2回答
元素悬停，然后单击将移除悬停效果，再次单击将再次添加悬停
jquery、click、hover、toggle、mouseevent
我正在尝试用JQuery创建一个搜索词拼图框。基本上是一个表格，每个单元格中都有一个字母表，用户需要通过单击表格单元格来查找和标记网格中的单词。因此，我尝试通过以下方式组合单击和悬停事件：
当鼠标悬停在上方时，所有单元格都应具有悬停高亮效果，但已被单击时除外。如果它被点击了，那么它应该只是改变成不同的颜色来标记活动选择，这样悬停效果就会被移除。再次单击选定的单元格时，它应该恢复到其原始状态，并添加了悬停高亮效果。进一步的点击会重复上面提到的切换。
这怎么可能呢？我尝试了下面的unbind()，bind()选项，但是不起作用。谢谢，阿提拉
$("#puzzleTable td")
浏览 0提问于2011-10-26得票数 2
回答已采纳
2回答
在一个方向运行CSS转换，而不是在另一个方向运行CSS转换。
html、css、css-transitions
我在超链接元素上使用CSS转换，使它们的交互看起来更流畅。但是，当用户等待它时，我也希望立即得到反馈。因此，我希望新的状态立即出现，但当用户离开时让它淡出。
下面是我目前正在使用的一些CSS：
a
{
display: inline-block;
padding: 20px;
background: #eeeeee;
color: black;
text-decoration: none;
transition: background 1s;
}
a:hover
{
background: #bbbbbb;
transition: background 0s
浏览 3提问于2017-12-29得票数 6
1回答
席形场概述无效时的悬停效应
angular、sass、hover、mat-form-field、mat-error
当鼠标悬停时，我试图改变背景的颜色，一个垫子形状的字段。
.mat-form-field.mat-form-field-appearance-outline.mat-form-field-outline-thick {
// HOVER EFFECT
background-color: $dark-blue-200;
}
上面的代码运行良好，当窗体控件有效时，但当它无效时，我尝试：
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid
.mat-form-field-ou
浏览 5提问于2022-01-20得票数 0
6回答
在Hover中改变分区的边界
javascript、html、css、hover
我有一个简单的div。
<div id="sample"></div>
我使用以下代码使其边界透明：
var sample_div = document.getElementById('sample');
sample_div.style.borderColor = 'transparent';
当鼠标指针处于悬停状态时，我想使div的边框变为蓝色。下面是我的css代码：
#sample:hover{
border: 1px solid blue;
border-color: blue;
}
当鼠标指
浏览 5提问于2015-12-17得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
