css - 伪类 :focus doesn't propagate, 现在是什么？-6ren

css - 伪类 :focus doesn't propagate, 现在是什么？

转载作者：行者123 更新时间：2023-11-28 16:59:31

26

4

问题:如何仅使用 CSS 使其适用于 Tab 键？ (制表符已经起作用了)。

#menu:before {
  content:"Menu \25bc";
  font-weight:bold;
  width:100%;
}
#menu:hover:before {
  content:"Menu \25b2";
}
#menu li {
  position:absolute;
  left:-9999px;
}
#menu:hover li {
  position:relative;
  left:0;
}

<html>
  <title>Test</title>
  <body>
    <header>
      <a href="#header1">Link to homepage</a>
    </header>
    <nav>
      <ul id="menu">
        <li><a href="#menu1">Menu item 1</a></li>
        <li><a href="#menu2">Menu item 2</a></li>
      </ul>
    </nav>
    <main>
      <p>Other text with maybe a <a href="#main1">link here</a>.</p>
    </main>
  </body>
</html>

编辑:原始问题如下。

我有一个菜单:

<ul id="menu">
  <li><a href="#">Menu item 1</a></li>
  <li><a href="#">Menu item 2</a></li>
</ul>

但是，我想将它隐藏在较窄的页面宽度中，所以我应用了以下 CSS:

@media (max-width: 768px) {
  #menu:before {
    content:"Menu \25bc";
  }
  #menu:hover:before {
    content:"Menu \25b2";
  }
  #menu a {
    position:absolute;
    left:-9999px;
  }
  #menu:hover a {
    position:relative;
    left:0px;
  }
}

这会隐藏菜单，在它的位置添加“菜单”一词，带有向下或向上箭头，具体取决于悬停状态，当您将鼠标悬停在菜单上时，它也会显示菜单。

问题是，虽然 :hover 工作正常，但我无法使用 :focus 伪类通过跳转到其中一个标签来显示两者。 (唉，:root 不会像其他伪类一样工作，所以像 #menu a:focus:root #menu a { position:relative; left:0; } 这样的东西不会工作，据我所知)。

有没有人知道我如何只使用 CSS 来解决这个问题？还是我给自己挖了个坑？

最佳答案

基于以下 OP 评论:

I'm happy to change the HTML, but how would :target work here?

这里是一段 :target

nav {
  height: 0;
  overflow: hidden;
  position: relative;
}
nav:target {
  height: auto;
}
nav + div a:before {
  content: "Menu \25bc";
  font-weight: bold;
  width: 100%;
}
nav:target + div a:before {
  content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
  display: none;
}
nav:target + div .close,
nav + div .open {
  display: block;
  position: absolute;
  top: 0
}

<nav id="menu">
  <ul>
    <li><a href="#menu1">Menu item 1</a>
    </li>
    <li><a href="#menu2">Menu item 2</a>
    </li>
  </ul>
</nav>
<div>
  <a class="open" href="#menu"></a>
  <a class="close" href="#"></a>
</div>

关于css - 伪类 :focus doesn't propagate, 现在是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31542922/

26

4

0

文章推荐： javascript - TweenJS 绝对位置(to()方法)不起作用

文章推荐： python - 有没有办法控制在 Python argparse 中评估参数的顺序

文章推荐： javascript - 如何通过 JavaScript 隐藏/显示 Tiles 中的 div？

java - @Transactional(propagation = Propagation.REQUIRES_NEW)打开两个交易？
我们发生了一个生产事件，导致一堆线程陷入僵局，服务器停止工作。为了进行调查，我测试了一些具有不同的Spring事务传播的东西，如果我没有记错的话，如果根本没有现有的事务，那么REQUIRES_NEW传
java - @Transactional(propagation = Propagation.SUPPORTS) 没有事务正在进行
我有一个简单的 CRUD 项目。我有一个使用 Hibernate 5 和 Spring Boot 的简单 CRUD 项目。当我使用@Transactional(propagation = Propag
java - @Transactional(propagation=Propagation.REQUIRES_NEW) 的奇怪行为
这是我的问题: 我正在 Java EE/Spring/Hibernate 应用程序上运行批处理。此批处理调用 method1。这个方法调用一个method2，它可以抛出UserException(一个
spring - TransactionTemplate vs @Transactional(propagation = Propagation.REQUIRES_NEW)
有人可以解释为什么第一个单元测试类工作而第二个测试类失败并出现锁定等待超时错误？第一个类: public class Test1 extends AbstractTransactionalJUnit
java - @Transactional(propagation = Propagation.REQUIRED) 在 Spring ？
如果我有以下代码: @Component public class A{ @Transactional(propagation = Propagation.REQUIRED) public void
java - 为什么 "@Transactional(propagation = propagation.NEVER)"不起作用？
在 Spring 文档中，对于 NEVER 传播: Execute non-transactionally, throw an exception if a transactionexists. 我想
java - 何时使用 Spring @Transactional (propagation = Propagation.SUPPORTS)？
根据Spring javadoc @Transactional(propagation = Propagation.SUPPORTS) Support a current transaction, e
java - 尽管使用 @Transactional(propagation=Propagation.REQUIRES_NEW) 但出现 LazyInitializationException
我将 jHipster 与 Spring Data JPA 一起使用，并具有以下方法: @Transactional(propagation=Propagation.REQUIRES_NEW) pub
java - @Transactional (readOnly = false, propagation = Propagation.REQUIRED) 抛出异常
我正在使用 spring 和 hibernate，并使用 spring 事务管理器。我有以下方法，它是从另一个事务性方法调用的。 @Transactional (readOnly = true, pr
java - 为什么即使在 spring 服务类的第二种方法中 propagation=Propagation.REQUIRES_NEW 时事务也会回滚？
现在基本设置都可以了，我开始尝试交易。Struts+Spring+Hibernate注解事务管理器。这是 Action 中的示例代码，将调用一个服务类: userService.addUser
database - Spring Propagation.REQUIRES_NEW 嵌套在 Propagation.NESTED 时的行为
我有这样的代码 @Transactional(propagation = Propagation.NESTED) @TransactionConfiguration(transactionManage
java - 带@Transactional(propagation = Propagation.SUPPORTS) 的方法和不带@Transactional 的方法有什么区别？
方法与有什么区别 @Transactional(propagation = Propagation.SUPPORTS) 还有一个没有@Transactional的方法？例如: public clas
java - 嵌套 @Transactional(propagation = Propagation.REQUIRES_NEW) 是否创建新的 Hibernate session ？
当启动新事务时，在使用@Transactional(propagation = Propagation.REQUIRED)启动的当前事务中使用@Transactional(propagation =
Spring : Difference between method with @Transactional(propagation=Propagation. SUPPORTS) vs 没有@Transactional
方法与 @Transactional(propagation = Propagation.SUPPORTS) 有什么区别vs 没有 @Transactional注释？ @Transactional(p
java - 如何从 @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Throwable.class) 中排除特定异常？
@Transactional(propagation = Propagation.REQUIRED, rollbackFor = Throwable.class) public void abc()
spring - javax.persistence.TransactionRequiredException : no transaction is in progress, @Transactional(propagation=Propagation.REQUIRED) 不工作
每当我尝试 entityManager.flush() 时，我都会收到标题中提到的错误。有趣的是，我的所有模型都在应用程序启动期间在 MySql 上正确创建。我已经阅读了几个具有类似异常的问题，基本
java - java spring : @Transactional(propagation = Propagation. 中的并发需要，隔离 = Isolation.SERIALIZABLE) 不工作
我正在开发一个 java (spring/hibernate) 应用程序，它是一种限时且数量有限的销售平台。也就是说，我必须在上午 10 点到 11 点的时间段内只销售 1000 张某种类型的卡片。我
spring - @Transactional(rollbackFor = Exception.class) 和@Transactional(propagation=Propagation.REQUIRED) 之间有什么区别
@Transactional(rollbackFor = Exception.class) public void foo1() { `/**Some Code**/` } @Transact
java - 为什么 @Transactional(propagation = Propagation.SUPPORTS, readOnly = true) 修复 Hibernate 延迟加载异常？
我将我正在开发的应用程序从使用 AspectJ 加载时间编织切换到使用 Spring CGlib 代理，并且在我这样做之后，我开始在代码的许多部分中获得 hibernate 延迟加载异常，而在过去有没
MySQL子查询错误不是外部查询的 "propagated"
我一直在尝试追踪现有 MySQL(5.7，Linux)代码中的错误行为。我对我发现的行为感到震惊/困惑/不高兴当子查询返回错误时: SELECT * FROM charges WHERE Charge

首页

博学

6Ren·AI

商城

css - 伪类 :focus doesn't propagate, 现在是什么？