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

Question

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

在第 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>

Answer 1

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

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

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

How do you make an object solid so that it doesn't become overlapped by hover items? (CSS & HTML)

html

css

hover

geometry

overlapping