Question

我是Web开发的初学者，并且在页面上有图片。通过将鼠标悬停在图像上，我希望在图像上显示一个带有简单文本的对话框。我有一些代码，但是当我将鼠标悬停在图像上时无法显示文本，也找不到错误。我必须使用javascript执行此任务。感谢您在指导我解决此问题方面的帮助。谢谢你。

我的代码：

//my function to display the dialog box 
function displayinfo(){


var cart = document.getElementsByClassName("cart");
var sm = document.getElementsByClassName("thesum");
var info = document.getElementById("hover-on-cart");


 cart.onmouseover=function(){

    info.style.display = "block";

  }


 cart.onmouseout = function(){
    
     info.style.display = "none";	
    
  }
 
 

}

.cart{

height:25px;
float:left;	
cursor:pointer;
}	



#hover-on-cart{
	
	display:none;
	font-size:30px;
	color:white;
	background-color:black;
	margin-top:0px;
	
}

//my image 

<img src = "IMAGES/shopcart.png"  class = "cart" onmouseover="displayinfo()" alt = cart/>    

//text I want to pop as a dialog box 
 <span class = "popuptext" id = "hover-on-cart">
    <p>"hi"</p>
 </span>

Answer 1

参考：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

//my function to display the dialog box 
function displayinfo(a){
var sm = document.getElementsByClassName("thesum");
var info = document.getElementById("hover-on-cart");

    info.style.display = "block";
}

function hideinfo(b){
   var info = document.getElementById("hover-on-cart"); 
     info.style.display = "none";	
    
  }

.cart{

height:25px;
float:left;	
cursor:pointer;
}	



#hover-on-cart{
	position: fixed;
    top: 50;
    bottom: 0;
    left: 50;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    width:200px;
    height:100px;
	display:none;
	font-size:30px;
	color:white;
	background-color:black;
	margin-top:0px;
	
}

<img src = "https://static.vecteezy.com/system/resources/previews/000/628/934/large_2x/vector-shopping-cart-icon.jpg" class = "cart" onmouseover="displayinfo(this)" onmouseout="hideinfo(this)" alt = cart/> = <span class = "thesum"> </span> (price of selected products)


<div id="p-float">

<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\subtle.jpg" alt = subtle_art/ ><br/>
<div class="p-name">Subtle Art of not giving an F</div>
<div class="p-price">$9.99</div>
<div class="product">

<div class = "amount"> Amount:<input type = "number" class="amn" name = "num" onchange="updatetotal(event)" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>

<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\everything.jpg" alt = every/ ><br/>
<div class="p-name">Everything is <br/> F</div>
<div class="p-price">$9.99</div>
<div class="product">

<div class = "amount"> Amount:<input type = "number" class = "amn" onchange="updatetotal(event)" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>

</div></div>

<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
<div class="p-name">Deep </br>Work </div>
<div class="p-price">$9.99</div>
<div class="product">

<div class = "amount"> Amount:<input type = "number" class="amn" onchange="updatetotal(event)" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>


<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
<div class="p-name">Awaken the giant within</div>
<div class="p-price">$9.99</div>
<div class="product">

<div class = "amount"> Amount:<input type = "number" class="amn" onchange="updatetotal(event)" name = "num" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>

<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\habits.jpg" alt = hbts/ ><br/>
<div class="p-name">7 Habits of highly effective people</div>
<div class="p-price">$9.99</div>
<div class="product">

<div class = "amount"> Amount:<input type = "number" class = "amn" name = "num" onchange="updatetotal(event)" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me" /> Buy Me </div>
</div>
</div></div>

<div class="p-float"><div class="p-float-in">
<img class="p-img" src="IMAGES\anything.jpg" alt = any/ ><br/>
<div class="p-name">Achieve anything in 1 year</div>
<div class="p-price">$9.99</div>
<div class="product">

<div class = "amount"> Amount:<input type = "number" class="amn" name = "num" onchange="updatetotal(event)" value = "0" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div>
</div>
</div></div>

</div>

<button class = "step2btn" onclick = "return gotostep2()"> Next </button>
<button class = "randbtn" id = "rand" onclick="randomfunc()"> Select random products </button>

<br/></br></br></br>

<h1 id = "step2"> Step 2 : fill the form to continue ! </h1> <br/>

<div class = "form-area" id = "forma">


<form class = "sign-form" >

<img src = "https://static.vecteezy.com/system/resources/previews/000/628/934/large_2x/vector-shopping-cart-icon.jpg" class = "cart" onmouseover="displayinfo(this)" onmouseout="hideinfo(this)" alt = cart/> = <span class = "thesum"> </span> (price of selected products)

<div class = "form-container">

<h1> Enter purchase data below : </h1>

<label for "dieythinsi" > Address Name</label>
<input type = "text" placeholder = "Enter address name " id = "address" name = "addr" required/>
</label>



<label for "arithmos-dieyth" > Address Number</label>
<input type = "text" placeholder = "Enter address number " id = "address-num" name = "addnum" required/>
</label>


<label for "perioxi" > Region </label>

<input type = "text" placeholder = "Enter region "id = "region" name = "reg" required/>
</label>


<label for "taxidromikos"> Postal Code</label>
<input type = "text" placeholder = "(5 digit number)" id = "postal-code" name = "postcode" required/>
</label>

<div id = "delivery-expenses">

Delivery Expenses at 2$

</div>

<div id ="express-delivery">
<span id = "e-text">Express Delivery ? (+6$) (if total purchase more than 30$ then it's free !)</span><input type="checkbox" id = "exp-box" value="express" onclick="expressfunc()" id="e-delivery">
</div>

</div>

<button type = "button" id = "c" class = "cancelbtn" onclick = "goback()">Go back</button>
<button type = "button" id = "n" class="continuebtn" onclick = "return checkdata()">Next</button>



</form>

<span class = "popuptext" id = "hover-on-cart">
<p>"hi"</p>
</span>

将鼠标悬停在图像上时无法显示文本

1 个答案: