CSS造型我的页面，对不起家伙我是一个菜鸟

问题描述 投票：-3回答：3

我的网站代码如下，但我的问题不是它的功能而是它的外观

var name;
var nameFormat = true;
var totalRight=0;
var welcomeName
$("#welcome2").hide();
$("#welcome2-0").hide();
$('form').hide();
$("#MYsubmit").hide();
var score;
function submission() {
    var name = document.getElementById("textbox").value;
  if (name.length > 0) {
    alert("Welcome " + name);
    $("#name").fadeOut(1000);
    $("#welcome").fadeOut(1000);
    $("#welcome2").show();
    $("#welcome2-0").show();
	$('MYsubmit').show();
    $('form').show();
   welcomeName=document.getElementById("welcome3-1").innerHTML +="Welcome "+name+"!"+"Good Luck!";
   
 

  } else {
    nameFormat == false;
    alert("Please enter the name again");
  }



}


var welcomeName=document.getElementById("Question1").innerHTML +="1. How long does it take the average person to fall asleep?";
var welcomeName=document.getElementById("Question2").innerHTML +="2.How many eggs does the average american eat per year?";
var welcomeName=document.getElementById("Question3").innerHTML +="3.How many taste buds does the average american have?";
var welcomeName=document.getElementById("Question4").innerHTML +="4.What is the average lifespan of a squirrel?";
var welcomeName=document.getElementById("Question5").innerHTML +="5.on average __% of all restaurant meals include potato chips";


function finalsubmit() {
if(document.getElementById('correctAnswer-1').checked) {
 totalRight=totalRight+1;

}

if(document.getElementById('correctAnswer-2').checked) {
 totalRight=totalRight+1;

}

if(document.getElementById('correctAnswer-3').checked) {
 totalRight=totalRight+1;

}

if(document.getElementById('correctAnswer-4').checked) {
 totalRight=totalRight+1;
 
}

if(document.getElementById('correctAnswer-5').checked) {
 totalRight=totalRight+1;

}



document.getElementById("score").innerHTML +="RESULT for "+name+"You Scored "+totalRight+" out of 5!"+"<br>";
score=document.getElementById("ans").innerHTML +="You scored "+totalRight+" out of 5";
if(totalRight==5){
	document.getElementById("score").innerHTML +="You score 5/5 PERFECT!";
}

}

/*
$(document).ready(function(){
  $("#hint1").mouseover(function(){
    $("#hint1").
  });
  $("#hint1").mouseout(function(){
    $("#hint1").
  });
    }); 
*/

$(document).ready(function(){
  $('#hint1').hover(function() {
        
    $(this).text("7Minutes");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});


$(document).ready(function(){
  $('#hint2').hover(function() {
        
    $(this).text("263Eggs");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

$(document).ready(function(){
  $('#hint3').hover(function() {
        
    $(this).text("10,000");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

$(document).ready(function(){
  $('#hint4').hover(function() {
        
    $(this).text("7Years");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});

$(document).ready(function(){
  $('#hint5').hover(function() {
        
    $(this).text("7%");
  },
  function() {
    
    $(this).text("[HINT]");
  });
});
#welcome{
    top:30px;
    left: 30px;
    color: antiquewhite;
    border: 2px solid darkblue;
    background: darkblue;
    padding: 25px;
  
}

#name{
 
    top:30px;
    left: 500px;
    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}

body {
    background-color: lightblue;
    color: white;
  }
#welcome2{
	text-align: center;

    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}
#welcome3-1{
	top:30px;
    left: 500px;
    color: Aqua;
    background:darkblue;
    border: 25px solid darkblue;
}
#welcome2-0{
	text-align: center;
    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}
.Question{
	text-align: left;
    color: antiquewhite;
    background: darkblue;
    border: 25px solid darkblue;
}
.hints{
color: aquamarine;
background: darkblue;
border: 25px solid darkblue;
}
.quiz{
background: darkblue;
}
#ans{
	text-align: left;
	border: 25px solid darkblue;
	background: darkblue;
	color:red;
}
#score{
	
	background-color: yellow;
    color:red;
    background-size: 100px 100px;

}
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Welcome!</title>

  <link rel="stylesheet" href="includes/styles.css" type="text/css" media="screen" />
</head>

<p>

  <body>
    <div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
    <div id="name"><b>Name:</b>

      <input type="text" id="textbox">
      <button id=”myButton” type="button" onclick="submission()">submit</button>
</div>



<h1 id="welcome2">Myanmar Trivia Quiz </h1>
<div id="welcome2-0">Test your Demographic Knowledge<br>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id="welcome3-1"><b></b></div>
<div id="ans"><h3></h3></div>
<form class="quiz">
        <div id="Question1" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="7Minutes" id="correctAnswer-1" class="Answer"> 7 Minutes<br>
        <input type="radio" name="radiobutton" value="5Minutes" >5 Minutes<br>
        <input type="radio" name="radiobutton" value="20Minutes" >20 Minutes  <br>
        <input type="radio"name="radiobutton" value="14Minutes" >14 Minutes  <br>
        <div id="hint1" class="hints">[HINT]</div>
</form> 
    <form class="quiz"> 
        <div id="Question2" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="263Eggs" id="correctAnswer-2">263 eggs a year<br>
        <input type="radio" name="radiobutton" value="23Eggs">23 eggs a year<br>
        <input type="radio" name="radiobutton" value="100Eggs">100 eggs a year<br>
        <input type="radio" name="radiobutton" value="45Eggs">45 eggs a year<br>
        <div id="hint2" class="hints">[HINT]</div>
    </form>
  <form class="quiz">  
        <div id="Question3" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="10,000" id="correctAnswer-3">10,000<br>
        <input type="radio" name="radiobutton" value="4000">4000<br>
        <input type="radio" name="radiobutton" value="20,000">20,000<br>
        <input type="radio" name="radiobutton" value="537">537<br>
        <div id="hint3" class="hints">[HINT]</div>
		
  </form>
  <form class="quiz">
  
        <div id="Question4" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="7Years" id="correctAnswer-4"> 7 Years<br>
        <input type="radio" name="radiobutton" value="5Years">5 Years<br>
        <input type="radio" name="radiobutton" value="20Years">20 Years  <br>
        <input type="radio" name="radiobutton" value="14Years">14 Years  <br>
        <div id="hint4" class="hints">[HINT]</div>
    
 <form class="quiz">
        <div id="Question5" class="Question"><b></b></div>
        <input type="radio" name="radiobutton" value="7%" id="correctAnswer-5"> 7%<br>
        <input type="radio" name="radiobutton" value="5%">5%<br>
        <input type="radio" name="radiobutton" value="20%">20%<br>
        <input type="radio" name="radiobutton" value="14%">14%<br>
        <div id="hint5" class="hints">[HINT]</div>

        <br>
        <br>
       <button id=”MYsubmit” type="button" onclick="finalsubmit()">submit</button>
	   <div id="score"></div>
	   <div id="COPYRIGHT">Copyright © 2019. All rights reserved</div>

</form> 








</body>
<script src="includes/scripts.js"></script>

</html>

。我希望深蓝色的背景相互接触，我希望我的单选按钮移动所以它们低于答案，我也想对提示做同样的事情，并欢迎评论。我是新的css所以我道歉，如果它做得很差，我很难搞清楚这一点，并会感谢任何帮助。谢谢你们很多人！

javascript jquery html css
3个回答
0
投票

也许你可以使用工具提示？来自w3schools的例子

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<div class="tooltip">HINT
  <span class="tooltiptext">Put your hint here</span>
</div>
0
投票

我很确定你应该使用Tooltip而不是mouseover ^^

JQuery Tooltip

$（ “＃HINT1”）提示（）。

用title作为文本的属性。

Here's the Codepen Demo

0
投票

我找到了答案，跳过动画，但使用下面的代码让它工作：

$(document).ready(function(){
  $('#hint2').hover(function() {

    $(this).text("hover text");
  },
  function() {

    $(this).text("back to origonal");
  });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.