如果div的子元素被聚焦，我该如何隐藏它？
如果div的子元素被聚焦，可以通过CSS的:focus伪类选择器来隐藏它。具体的做法是给子元素添加一个隐藏的样式，然后使用:focus伪类选择器来控制该样式的显示与隐藏。
以下是一个示例的CSS代码：
.child-element {
display: none;
}
.child-element:focus {
display: none;
}在上述代码中，.child-element是子元素的类名，display: none;用于隐藏子元素。当子元素被聚焦时，:focus伪类选择器会匹配到该元素，并且设置display: none;，从而保持子元素的隐藏状态。
需要注意的是，上述代码只是隐藏了子元素，但并没有禁用子元素。如果需要同时隐藏并禁用子元素，可以使用其他的CSS属性或JavaScript来实现。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），可以加速网站的访问速度，提供更好的用户体验。产品介绍链接地址：https://cloud.tencent.com/product/cdn
相关·内容
4回答
我有一个用于下拉菜单的html结构：
<ul>
<li><ul>...</ul></li>
<li>...</li>
</ul>
和css：
li ul {display : none;}
li:hover ul {display : block;}
(这只是基本结构)。
当我从菜单中选择一个项目时，我正在用ajax加载一些东西，并且我想关闭打开的子菜单。
我试过用jquery隐藏被点击元素的父元素("li“是被点击的元素，"ul”是父元素)，元素被隐藏了，但是当鼠标
浏览 1提问于2012-03-06得票数 0
回答已采纳
我正在尝试结合使用伪选择器和伪元素来创建自定义工具提示。
我的HTML：
<input id='test'/>
我的CSS：
#test {
position: relative;
}
#test:focus {
background-color: #08c;
}
#test:focus:before {
position: absolute;
left: 100%;
width: 10px;
height: 10px;
background-color: black;
}
运行代码的小提琴：
目前，当#t
浏览 3提问于2013-03-16得票数 6
回答已采纳
我有一个CSS媒体查询/ flexbox样式，在导航div达到最大宽度768px后，它会分配一个"display: none“给导航div。使用Javascript，一旦我的汉堡按钮被按下，我就可以使用if/else语句来切换显示："block“和"none”。
然而，痛点是，一旦我将它切换到“显示:无”，一旦屏幕超过指定的宽度，导航栏就消失了；汉堡菜单只在较小的宽度尺寸下出现。
它看起来像切换永久分配“显示:无”给它。如何在不点击汉堡包按钮的情况下将"display: none“移回"display: block”？
const burgerBar
浏览 3提问于2021-06-04得票数 0
2回答
替代/深/深/
、、、
我想改变ng引导分页组件的样式，并在一个角6应用程序中使用/deep/链接。下面的代码工作正常，但控制台显示的是不推荐使用该代码的警告。
那么，我应该如何改变它以消除警告呢？
下面是我目前使用的CSS代码：
ngb-pagination /deep/ .page-item.disabled .page-link{
background: none;
}
ngb-pagination /deep/ .page-item.active .page-link {
background-color: #223C61;
&:focus, &:visited
浏览 0提问于2018-08-06得票数 10
2回答
显示和隐藏焦点上的不同元素
、、、、
我一直在研究一些显示和隐藏HTML元素的方法，最后我找到了。
我的意图是使用一种方法来显示和隐藏元素，而不需要使用JavaScript、JQuery或除CSS和HTML之外的任何其他方法，因此我选择使用属性"tabindex"，然后我创建了以下简单的研究案例...
HTML：
<div id="root" tabindex="1">
<div>DIV A</div>
<a class="hidden" href="http://www.google.com"
浏览 1提问于2014-11-25得票数 1
我正在尝试保持我的css弹出窗口打开，这样任何人都可以从弹出窗口复制文本，但每次鼠标单击发生时，弹出窗口关闭...除非鼠标在弹出窗口之外单击，否则如何保持打开状态？
我尝试添加以下内容：
a.tooltip-reports:active { display: block; }
但这并不管用...
我的css：
/* click tooltip : reports.php */
a.tooltip-reports { cursor:pointer; outline:none; }
a.tooltip-reports strong { line-height:16px; }
a.tooltip-
浏览 2提问于2013-10-30得票数 1
我有一个容器小部件，放在代码沙箱小部件的位置上，我想有条件地隐藏它。
通过在容器小部件上应用条件类，我已经将显示的容器小部件CSS属性设置为none。这个类通过容器小部件配置中的“附加CSS类”面板应用，以及侦听代码沙箱小部件上的状态更改。这个类将display的CSS属性设置为小部件上的none。
{{#if w_widget1.state.hideContainer}}
hidden
{{/if}}
当我这样做时，容器小部件是隐藏的，但是它仍然是可点击的。如何使用以这种方式设置的条件类完全隐藏我的小部件？
浏览 4提问于2022-11-17得票数 1
1回答
我有一些动态创建的选择菜单，有时有一些选项组没有任何选项在里面。
我用一行CSS代码把它们藏起来。它在当时(2016年)的Chrome上运行，但是重新访问我注意到的网站，它已经失效了。
optgroup:empty{display:none}
有什么办法让我知道它是否被否决了吗？如果optgroup标签里面没有任何选项，我应该如何隐藏它们呢？
浏览 1提问于2018-04-08得票数 0
我正在开发一个仅支持CSS的下拉菜单。这是我现在使用的代码：
.show
{ display: none;
}
.hide:focus + .show
{display: block;
}
.hide:focus
{display: none;
}
#ddm
{display: none;
}
.hide:focus ~ #ddm
{display: block;
}
<body>
<a href="#" class="hide">menu</a><a href
浏览 0提问于2021-06-07得票数 0
在某些情况下，我试图为具有滚动条的元素的后代添加计算出的宽度，但似乎无法使以下内容工作。伪元素可以这样使用吗？如果不是，为什么不呢？身体：：-webkit-滚动条没有相同的后代身体和那里的工作？
下面是我想要工作的代码。只在主体或父div有伪元素：：-webkit-滚动条的情况下才添加宽度)，但我很感兴趣的是为什么它不能工作。
div::-webkit-scrollbar .child-element, body::-webkit-scrollbar .child-element {
width: calc(100% - $scrollbarwidth );
}
浏览 1提问于2015-10-22得票数 1
回答已采纳
我希望使用CSS :not()来针对前面的选择器。这个是可能的吗？
示例：
a.button:before {
content: "Show Text";
}
a.button:not(:before) {
display: none;
}
<a href="#" class="button">Hide Text</a>
浏览 3提问于2015-11-16得票数 16
回答已采纳
2回答
我遇到了一个我无法通过谷歌解决的问题。我有一个静态HTML：
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input class="search" type="text" placeholder="Search..." />
<ul class="result
浏览 2提问于2015-07-05得票数 4
回答已采纳
3回答
当输入类型数字聚焦时，我试图更改底部边框颜色。在第一部分中，我成功了，但是css并不适用于所有选择器。问题是：
左边(比索)没有聚焦，但它有相同的选择与公斤。下面是代码：
input[type=number] {
color: #666;
border-width: 0px 0px 1px 0px !important;
border-color: #dcdcdc !important;
border-radius: 0px !important;
background: #fafafa00;
}
.input-group-text {
浏览 2提问于2021-09-13得票数 2
回答已采纳
1回答
我有一个页面与许多下拉菜单，这是可见的悬停事件，使用css。但是，当我按tab键时，我也想让它们可见，并且使用jquery将它们放在焦点上。我试过这个：
发生了以下情况：
$("body").keydown( function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
$("*").bind("focus",function(){
var $self = $(this);
浏览 1提问于2016-11-14得票数 1
2回答
用JS面向对象编程改变CSS
、、、、
我想通过OOP JS更改跨度的CSS值。
鼠标悬停在照片上，文本的主体“改变”，即一个跨度消失，另一个跨度出现。
$(Document).ready(function(){
$('#blackSquare').mouseenter(function(){
$('#originalContent').css('display', 'none');
$('#photo').css('display', 'table-cell');
});
浏览 2提问于2014-04-21得票数 1
4回答
未删除CSS输入轮廓
、、、
我遇到了一个问题，当输入字段被聚焦时，默认的蓝色轮廓没有被删除，尽管尝试了两种CSS技术来删除该轮廓。我尝试过使用input:focus和input[type="text"]:focus，但都没有删除这个大纲。我的CSS可能做错了什么？ 下面是包含comment-box输入的表单： <div class="comment-form">
<form action="/app/blog/{{this.blogId}}/comment" method="post">
<label
浏览 19提问于2017-01-15得票数 0
回答已采纳
2回答
我想要实践，甚至是最好的实践，用Html+JS+CSS.我只使用一页客户端的Sudoku页面。我的Sudoku标记基本上是一个<table>，带有<td>。
(我愿意听取改善这方面的建议)。
我的要求：
在focus (焦点的键盘概念)下有一个单元格(通过箭头键(加上家庭等)将css突出显示为黄色的css)。类型--将该值设置为当前聚焦的单元格的整数值。
我在每个单元格内使用一个输入按钮。Javascript很好用。
我唯一的问题是显示器。当一个单元格有焦点时，它的高亮显示并不覆盖整个TD，而只是包含在输入按钮中的视觉空间。我在按钮周围有一些不是“黄色”的空间。
我不认
浏览 2提问于2009-08-02得票数 1
回答已采纳
我想在使用CSS的R闪亮应用程序中关闭selectInput()的焦点。
.selectize-input.focus选择器中的以下声明不应该实现这一点吗？
.selectize-input.focus { focus: none; }
现在，我只使用这个。框仍然是聚焦的，但它是清晰的，而不是蓝色。
.selectize-input.focus { border-color: rgba(0, 0, 0, 0); }
谢谢!
浏览 1提问于2017-02-18得票数 0
我们的需求是很普通的：在社区里用户可以上传自己拍的短视频，其他用户可以浏览播放该短视频。
我们发现如果直接使用腾讯云的COS+CDN的服务，购买CDN的流量包，一个GB的流量大概是2毛钱。其中CDN也有音视频点播加速。使用对象存储COS服务来存储比如用户拍的mp4的视频。请问技术上可以实现吗？
[图片]
[图片]
[图片]
如果使用腾讯云现在的短视频服务，价格比较贵，虽然SDK工具功能丰富，但我们也用不到。平均一个GB的流量大概要5毛钱。而且是包月的，很容易就会浪费流量。
[图片]
浏览 1687提问于2017-12-12
回答已采纳
6回答
我正在使用一个输入组件并试图删除大纲蓝色默认颜色，但我尝试的所有操作都失败了
我已经尝试更改CSS焦点大纲和框影属性。
:focus {
outline: 0px !important;
-webkit-appearance: none;
box-shadow: none !important
}
当聚焦于输入组件时，我希望蓝色轮廓会消失。
浏览 0提问于2019-09-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
