html - 底层和顶层的CSS悬停触发器-6ren

html - 底层和顶层的CSS悬停触发器

转载作者：太空宇宙更新时间：2023-11-04 14:11:22

24

4

如何为两个图层制作 css 悬停过渡。我写了整个页面，以便您可以(复制/粘贴)从您的计算机桌面上试用它。我的作品有效，但是如果没有 javascript/jQuery 和纯 CSS 可以完成吗？我尝试使用 CSS pointer-events 并且能够转换顶层(#circleOuter)或底层(#circleInner)但不能转换两个层。为此，#circleOuter:hover 必须触发#circleInner。感谢您的帮助。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
        $(document).ready(function(){
            $("#circleOuter").hover(function(){
                $("#circleInner").css("transform","rotate(180deg)");
                $("#circleOuter").css("transform","rotate(-180deg)");
            }, function(){
                $("#circleInner").css("transform","rotate(0deg)");
                $("#circleOuter").css("transform","rotate(0deg)");
            });
        });
        </script>
        <style>
            #circleWrap
                {
                background:#ff0;
                width:200px;
                height:200px;
                position:relative;
                }

            #circleInner
                {
                background:url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat;
                width:200px;
                height:200px;
                position:absolute;
                transform: rotate(0deg);
                transition: 500ms ease all;
                }

            #circleOuter
                {
                background:url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat;
                width:200px;
                height:200px;
                position:absolute;
                transform: rotate(0deg);
                transition: 500ms ease all;
                }
        </style>
    </head>
    <body>

        <div id="circleWrap">
            <div id="circleInner">
            </div>
            <div id="circleOuter">
            </div>
        </div>

    </body>
</html>

最佳答案

根据您的实际示例，如果两个元素都是容器的大小并且同时触发只需使用父级触发它:

#circleWrap {
  background: #ff0;
  width: 200px;
  height: 200px;
  position: relative;
}

#circleInner {
  background: url(http://socalsky.com/_/images/mis/circle_inner.png) center center/ 188px 188px no-repeat;
  width: 200px;
  height: 200px;
  position: absolute;
  transform: rotate(0deg);
  transition: 500ms ease all;
}

#circleOuter {
  background: url(http://socalsky.com/_/images/mis/circle_outer.png) center center/ 200px 200px no-repeat;
  width: 200px;
  height: 200px;
  position: absolute;
  transform: rotate(0deg);
  transition: 500ms ease all;
}
#circleWrap:hover  #circleInner{
    transform: rotate(180deg);
}
#circleWrap:hover  #circleOuter{
    transform: rotate(-180deg);
}

<div id="circleWrap">
  <div id="circleInner">
  </div>
  <div id="circleOuter">
  </div>
</div>

关于html - 底层和顶层的CSS悬停触发器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43454920/

24

4

0

文章推荐： java - 如何在 HTML 页面中显示 CSV 文件中的大量数据？

文章推荐： c++ - C++ 单元测试器中的自定义断言

文章推荐： c++ - 在 Qt 中向 centralWidget 添加/调整背景图像大小

文章推荐： html - 如何在占据窗口确切高度的网络浏览器中显示视频？

Javascript 底层 toString 转换
我有以下功能: function addChange(result, bill) { for (var i=0;i
html - 底层 CSS 转换完成时字体粗细向上移动
这是网站: www.wearethefirehouse.com/phasetest 如果您慢慢滚动，您会注意到一旦菜单栏完全不透明，nav li 元素就会全部从 Enzo 300 跳起来(如在没有导航
c# - 字节转换为 INT64，底层
美好的一天。对于当前的项目，我需要知道数据类型如何表示为字节。例如，如果我使用: long three = 500;var bytes = BitConverter.GetBytes(three);
java - JVM 如何收集 ThreadDump 底层
请解释 JVM 是如何在底层收集 ThreadDump 的。我不明白它如何收集脱离 CPU 的线程的堆栈跟踪(等待磁盘 IO、网络、非自愿上下文切换)。例如，linux perf 仅收集有关 on
r - vector - 字符/整数类(底层)
开始学习 R，如果能帮助我理解 R 如何决定不同向量的类别，我将不胜感激。我初始化 vec <- c(1:6)当我执行 class(vec)我得到“整数”。为什么它不是“数字”，因为我认为 R 中的整
iphone - 底层 View 如何知道其矩形是否被触摸，无论是直接还是间接？
我有一个透明的 UIView，几乎覆盖了整个屏幕。我在顶部留下了 50 像素。它是 View Controller View 的 subview 。在UIView下面有一个继承自UIView的MyV
javascript - 在 javascript 中查看对象(底层)
我很好奇对象是如何在 Nodejs 中显示的，在本例中是 Promise。使用 console.log(promiseObject) 时，输出的类型为 {状态:待处理} 这对我来说似乎很奇怪，因为在该
azure - Windows Azure - 表服务 - 底层
当您在 Windows Azure 中使用表服务 API 时，幕后到底在做什么？我想我在某处读到这没有使用 SQL Server。它是否执行哈希表，然后过滤器真的像映射/减少操作一样运行？我对这些东西
javascript - Array.prototype.concat() 底层
如何查看函数 concat 中的代码？它是如何做的？有没有人有代码的副本或在浏览器控制台中查看它的方法？ console.dir 不给我访问权限 console.dir(Array.prototype
c++ - 底层 std::array 的正确类型
我是 C++ 的新手，所以如果这个问题的答案显而易见，我深表歉意。我一直在编写 STL 样式的自定义数据结构，以此来提高我的技能。 (我实际上也确实需要这种结构，但出于学习目的，我有点过分了。) 此
Java Tomcat，底层 Netty 线程没有停止
我正在尝试使用 log4j appender 将日志发送到 GrayLog2 (log4j2-gelf)。所以我将我的依赖项添加到我的 pom.xml 配置 log4j2.xml 来配置我的 appe
C++ priority_queue 底层 vector 容器容量调整大小
我正在使用带有 vector 的 priority_queue 作为底层容器。但是我希望堆的大小非常大。我知道动态 vector 容量调整大小的问题。所以我正在寻找方法来为我的priority_que
SqlDataAdapter.Fill() 超时 - 底层 Sproc 快速返回
我有一个 SqlDataAdapter，它填充了 21 行数据(4 列)。驱动它的 sproc 在几秒钟内在 SQL Mgmt Studio 中返回，但 .Fill() 需要 5 分钟。 Ar
android - 底层 PinchArea 从 MultiPointTouchArea 窃取事件
我想实现一个屏幕控制按钮，按下它可以作为 GUI 交互的修饰符。这对于 MouseArea 是不可能的，因为该 API 只能处理一个鼠标区域中的一个触摸点。该限制不适用于 MultiPointTo
html - Bootstrap 4 中的中心图像和 Div 底层
我试图将图像和 div 层置于包含 div 的中心，但到目前为止我无法让它从列的左侧移动。我尝试了几种不同的方法，但就是无法让它移动。即使 margin auto 技巧也不起作用，我怀疑这是因为 bo
hadoop - 当我设置 Hadoop 时，*底层* 文件系统需要哪些权限？
需要明确的是，我不是在询问 HDFS 中的权限设置，而是在 ext3 中或在 HDFS 运行于其上的各个数据节点机器上使用的任何文件系统中。 p> 我知道我们设置了 sudo chown hduser
c# - Swagger C# 枚举生成 - 底层 int 值与原始枚举不匹配
我在服务器上创建了一个枚举，其中手动设置了整数值，而不是默认从 0 开始递增 public enum UserType { Anonymous = 0, Customer = 10,
html - 带有 z-index 的交互式 HTML 底层
如果显示框架图像，我们能否使以下 Google map 具有交互性。 Vie
iphone - 关闭模态视图 Controller 时，底层 UIScrollView 会调整为全屏
我有一个顶部有自定义状态栏的布局 [在 Apple 的状态栏下方]，然后是 UIScrollview 在中间部分从左到右分页，然后我有一个 UIView 底部有一些自定义按钮。一个简单的三 Pane
asp.net-mvc - 底层 View 设置后如何访问 ViewBag.Title？
事情是这样的。我有一个 MVC 操作，在该操作上，我应用了自定义 ActionFilterAttribute 来使反序列化工作。现在，我想要做的是根据在此 View 中设置的 ViewBag.Titl

首页

博学

6Ren·AI

商城

html - 底层和顶层的CSS悬停触发器