2016-05-14 2 views
0

私はSoftware DesignプロジェクトのWebサイトを作成していますが、条件の1つは重複が許されないことです。私はホバー機能を持っているので、ステップの上にマウスを置くと、ステップのプロセスが表示されます。ホバーアイテムによってオブジェクトが重なり合わないように、ソリッドをどのようにしてソリッドにしますか? (CSS&HTML)

ステップ2 & 3ホバー効果の間に表示されるテキストは、Webページの端でブロックされるため、一種の段落形式で改行されます。ステップ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> 

+0

私の問題の解決策が見つかりました。以下にその特徴を示します。 – ASA2k

答えて

0

幅をすることができます、その後、指定する必要があります。この問題を解決するにはワードラップ。 .commonのためにCSSを追加してください:

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

Duh ...?あなたは幅を強制したい、それ以外の方法は? –

+0

@NiettheDarkAbsol Idk、なぜ私は質問したのですか。 – ASA2k

関連する問題