0
我爲軟件設計項目創建一個網站，其中一個標準是任何東西都不允許重疊。我有一個懸停功能，因此當您將鼠標懸停在這些步驟上時，會顯示該步驟的過程。你如何讓一個物體堅實，以便它不會被懸停物品重疊？ （CSS＆HTML）
步驟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>
找到解決我的問題。它的特色如下。 – ASA2k