html - 如何使对象成为实体，使其不会被悬停项重叠？ (CSS 和 HTML)-6ren

html - 如何使对象成为实体，使其不会被悬停项重叠？ (CSS 和 HTML)

转载作者：行者123 更新时间：2023-11-28 05:53:02

24

4

我正在为一个软件设计元素创建一个网站，其中一项标准是不允许任何内容重叠。我有一个悬停功能，这样当您将鼠标悬停在步骤上时，就会显示该步骤的过程。

在第 2 步和第 3 步中，悬停效果期间显示的文本被网页边缘遮挡，因此它以一种段落形式换行。

第2步有悬停效果的网页截图: http://s32.postimg.org/kw0u3lk8l/Screen_Shot_2016_05_14_at_7_05_13_PM.png

这就是我想对第 7 步和第 8 步做的事情，因为它们不会被任何东西阻挡，它们继续作为字符串，与圆圈重叠。所以我想知道是否有一种方法可以使圆圈成为实体对象或无法重叠的东西，从而迫使文本换行。

下方第 8 步悬停效果的重叠图像: http://s32.postimg.org/yof8z8b05/Screen_Shot_2016_05_14_at_7_05_25_PM.png

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>Fetch Execute Cycle</title>
    <style type="text/css">
        html {
           box-sizing: border-box;
           background-color: #faa635;
        }
        *, *:before, *:after {
           box-sizing: inherit;
        }
        body {
            font: 16px/1.5 "Comic Sans MS", cursive, sans-serif;
            margin: 1em;
        }
        h1 {
            font-family: American Captain, "Comic Sans MS", cursive;
        }
        .circle {
            width:450px;
            height:450px;
            border-radius:50%;
            border: solid;
            color:#3658bf;
            line-height:500px;
            background:#000;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .centered {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* COMMON HOVER EFFECTS */
        .common {
            display: block;
            font-weight: 700;
            text-align: center;
            border: 2px solid #3658bf;
            color: #3658bf;
            background: transparent;
            border-radius: .25rem;
            cursor: pointer;
            padding: .5rem;
            position: absolute;
            transform: translate(-50%, -50%);
        }

        .common:hover {
            background: rgba(54, 88, 191, 0.888);
            color: #fff;
        }
        .common:focus {
            outline: 0;
        }
        .common:hover {
            font-size: 0;
        }
        .common:hover:after {
            content: attr(data-hover);
            font-size: 1rem;
            word-wrap: break-word;
        }

        /* HELP */
        .help {
            left: 50%;
            top: 13%;
        }

        /* STEP 1 */
        .step1 {
            left: 70%;
            top: 20%;
        }

        /* STEP 2 */
        .step2 {
            left: 80%;
            top: 40%;
        }

        /* STEP 3 */
        .step3 {
            left: 80%;
            top: 65%;
        }

        /* STEP 4 */
        .step4 {
            left: 70%;
            top: 82%;
        }

        /* STEP 5 */
        .step5 {
            left: 50%;
            top: 90%;
        }

        /* STEP 6 */
        .step6 {
            left: 30%;
            top: 82%;
        }

        /* STEP 7 */
        .step7 {
            left: 20%;
            top: 65%;
        }

        /* STEP 8 */
        .step8 {
            left: 20%;
            top: 40%;
        }

        /* STEP 9 */
        .step9 {
            left: 30%;
            top: 20%;
        }

    </style>
</head>
<body>
    <h1><center><u>[]'s example of the Fetch Execute Cycle</u>    </center></h1>
    <div class="circle"><img class ="centered" src="http://i64.tinypic.com/4tsk5i.png" onMouseOver="this.src='https://i.imgsafe.org/67289f5.png'" onMouseOut="this.src='http://i64.tinypic.com/4tsk5i.png'" border="0" alt="Fetch Execute Cycle Image" width="300"></div>

    <!-- Help -->
    <a class="common help" data-hover="Hover over steps for information">Help</a>

    <!-- Step 1 -->
    <a class="common step1" data-hover="Fetching the instruction from primary storage!">Step 1</a>

    <!-- Step 2 -->
    <a class="common step2" data-hover="Decoding the instruction into an operation code and data addresses!">Step 2</a>

    <!-- Step 3 -->
    <a class="common step3" data-hover="Copying the operation code into the instruction register!">Step 3</a>

    <!-- Step 4 -->
    <a class="common step4" data-hover="Copying the addresses of the data into the address register!">Step 4</a>

    <!-- Step 5 -->
    <a class="common step5" data-hover="Using the address register to copy the data into the storage register!">Step 5</a>

    <!-- Step 6 -->
    <a class="common step6" data-hover="Sending the operation code and data to the ALU!">Step 6</a>

    <!-- Step 7 -->
    <a class="common step7" data-hover="Executing the instruction on the data!">Step 7</a>

    <!-- Step 8 -->
    <a class="common step8" data-hover="Sending the result to the accumulator, ready for the next instruction!">Step 8</a>

    <!-- Step 9 -->
    <a class="common step9" data-hover="Storing the results in primary storage!">Step 9</a>

</body>

最佳答案

要解决此问题，必须指定宽度，然后才能自动换行。因此，将这些行添加到 .common 的 css 中:

width:250px;
word-wrap: break-word;

关于html - 如何使对象成为实体，使其不会被悬停项重叠？ (CSS 和 HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37221446/

24

4

0

文章推荐： css - 带有媒体查询的顶部可折叠菜单

文章推荐： html - 在包装器的中心水平对齐链接和标题

文章推荐： css - Nokogiri 并从充满 Nokogiri 节点的数组中隔离选择元素

成为 Web 开发中文件扩展名的标准？
我正在学习 Go，但我无法在任何地方找到这个答案。 Web开发中的文件扩展名是否有任何官方标准？我见过多种约定，例如 .tmpl 和 .gtpl，这是什么？谢谢。最佳答案没有固定的标准，但有一些相
coldfusion - 成为 ColdFusion 开发人员需要什么？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 8 年前关闭。 Improve
c++ - 通过继承C++成为 friend
假设我有两个类(class) Widget ^ | Window 我还有另一个类应用程序: 定义如下 class Application { public: ... private:
java - 成为 Java 专家需要什么？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
sql - 成为 MySQL 专家的最快方法是什么？
我多年来一直在使用 MySQL，直到去年左右，主要是在较小的项目上。我不确定是语言的性质还是我缺乏真正的教程让我不确定我正在写的东西是否是优化目的和扩展目的的正确方法。虽然自学 PHP，但我对自己和
ejb - 什么使企业 bean 成为 'heavyweight'？
我已经多次读到 EJB 是重量级的……但昨晚我正在浏览关于 EJB 的 Java EE 6 教程，它们似乎只是普通的 Java 对象，除了它们可以有像 Stateless 或 Singletons 这
javascript - 如何使这个 SimpleModal 成为 onLoad？
如何使此 SimpleModal 脚本在页面加载时加载而不是单击按钮？谢谢=) Demo 基本模态对话框对于此演示，SimpleModal 使用此“隐藏”数据作为其内容。您还可以使用标准 HTML
haskell - 是否可以使 (a, a) 成为 Haskell 中类型类的成员
这是 Haskell 中的代码: class Fooable a where foo :: a -> a instance Fooable (a, a) where foo = ...
akka - 我如何测试 Akka 成为/不成为转换？
是否有推荐的方法来测试 Actor 是否使用 be 正确改变了其行为？我更喜欢使用 FSM 的原因之一是因为我可以轻松验证 Actor 是否已更改其行为。我不知道在使用 become/unbecome
php - 如何使 "else"成为 desc
我正在构建一个位于“php my admin”中的表，我是在第一次点击其中一个“th”它的 asc 时这样做的，现在我试图在第二次点击时制作 desc ..有什么想法吗？阿姆..很多我不记得了抱歉.
javascript - 什么使 CanvasRenderingContext2D 成为 CanvasRenderingContext2D？
考虑以下网页。我在 Firefox 中打开此页面，打开 JS 控制台并键入以下内容。 > document.getElementById(
postgresql - 成为 super 用户 postgresql
如何让自己成为 postgresql 的 super 用户？我一直在尝试创建数据库，但我不断收到以下错误: createdb: database creation failed: ERROR: pe
postgresql - PostgreSQL 成为 ORDBMS 是什么意思？
Query没有太大帮助。如前所述here , PostgreSQL 是 ORDBMS。 here ，它解释了 PostgreSQL 是 RDBMS。 PostgreSQL 是一个 ORDBMS 是什
html - 使成为 flex 容器的效果
我已经看到，当在导航元素中使用的链接中垂直/水平居中文本时，将链接设置为 flex 容器会很有用。我没有意识到链接文本实际上可以是一个(单个) flex 元素。我可以看到链接中的 span 元素可以是
set - 你如何使集合 B 成为 A 的子集
我见过很多说明如何找到给定集合的子集的示例，但是您如何将一个集合设为另一个集合的子集？所以集合 B 是集合 A 的子集，这将如何实现？我目前正在使用递归性质的方案，但是这本书只展示了如何列出子集而不是
ruby - 我如何使 stdin 成为 tty？
有些程序会根据其标准输出是否为 tty 来更改其输出。因此，如果您将它们放入管道或重定向它们，输出将与您的 shell 中的不同。这是一个例子: $ touch a b c # when runnin
MySQL 默认数据库以及如何使现有的非 InnoDB 成为 InnoDB
我正处于项目的开始阶段，到目前为止我一直在使用默认的 MySQL 数据库。对了，默认的数据库有名字吗？我的问题是如何在不删除当前表和创建新表的情况下将现有表更改为 utf-8 和 InnoDB。是
c# - 是否有可能阻止 Action 成为 ContentResult？
我正在尝试编写一个过滤器来包装数据以遵循 JSON API spec到目前为止，它适用于我直接返回 ActionResult 的所有情况，例如 ComplexTypeJSON。我试图让它在像 Comp
ios - Swift:成为 UITextField 上的第一响应者不起作用？
我在 Storyboard 上创建了一个带有一个 UITextField 的自定义 UIViewController。在 viewDidLoad 上，我将 UITextFIeld 设置为 become
c++ - 为什么在移动赋值中需要 std::variant 成为 valueless_by_exception？
我已经看到关于 valueless_by_exception 方法的 cppreference 的以下注释: A variant may become valueless in the followi

首页

博学

6Ren·AI

商城

html - 如何使对象成为实体，使其不会被悬停项重叠？ (CSS 和 HTML)