我想在单击按钮时打开一个div，当我将鼠标悬停在按钮上时div打开的那一刻，但是我需要在单击它时打开它。我以前从未使用过java脚本，所以我想这就是我点击按钮所需要的。有人可以使用下面的代码帮助我做到这一点。我希望我不必更改为整个网站来执行此操作
<html lang ="en-US">
<head>
<link rel="stylesheet" type="text/css" href="CSS/main1.css" media="all">
<link rel="stylesheet" type="text/css" href="CSS/slide.css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
</head>
<body>
<style>
body {
padding: 0;
margin: 0;
}
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: fixed;
width:100%;
height: 100%;
top:0px;
left:0px;
z-index:0;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.box{
background-color:#ffe680;
width:895px;
height:500px;
position:fixed;
margin-top:154px;
margin-left:288px;
z-index:1;
}
h1 {
color:white;
text-shadow: 3px 2px red;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
z-index:1;
}
.dropdown-content {
display: none;
position: fixed;
background-color: rgba(0,0,0,0.4);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-left:200px;
margin-top:96px;
width:800;
height:500;
}
.dropdown-content a {
color: white;
text-decoration: none;
display: inline;
width: 800px;
height: 200px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #F28686;
}
setTimeout( function(){$('box').hide();} , 4000);
</style>
<div class="dropdown">
<button class="dropbtn" style="margin-left:208px;">News</button>
<div class="dropdown-content"style="margin-left:325;">
<h1 style="margin-left:50;">Cooperate news</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-
style:none;">
<li> <a href="http://www.molex.com/molex/home"> *How connected cars are turning into revenue-generating machines - August 29, 2016</a></li>
<li><a href="#">*Delphu, Mobileye Join Forces to Develop Selfdrive System - August 23,2016</a></li>
<li> <a href="#">*MIT Spinoff to Market Breakthrough Batteries by 2017 - August 22,2016</a></li>
<li> <a href="#">*Cisco Cuts Workforce by 7 percent to Speed Transition to Software - August 18, 2016</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Chengdu News</h1>
<ul style="margin-left: 55%; margin-top:-396;float:left; line-height:2;list-style:none;">
<li>
<a href="#">* 10 Year Service Award ceremony</a></li>
<li><a href="#">* PDP Training</a></li>
<li> <a href="#">* ISO 27001 project Kick-off</a></li>
<li> <a href="#">* 2016 Internship Program update</a></li>
<li><a href="#">* WBC Update-- First Reading Salon</a></li>
<li style=" margin-top:190px; margin-left:180px;"><a href="http://www.molex.com/molex/home" style="color:white;">more>>></a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:110;">
<button class="dropbtn"style="margin-left:250px;">Notice & Policy</button>
<div class="dropdown-content"style="margin-left:215;">
<h1 style="margin-left:50;">Cooperate news</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none;">
<li> <a href="http://www.molex.com/molex/home"> *How connected cars are turning into revenue-generating machines - August 29, 2016</a></li>
<li><a href="#">*Delphu, Mobileye Join Forces to Develop Selfdrive System - August 23,2016</a></li>
<li> <a href="#">*MIT Spinoff to Market Breakthrough Batteries by 2017 - August 22,2016</a></li>
<li> <a href="#">*Cisco Cuts Workforce by 7 percent to Speed Transition to Software - August 18, 2016</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Chengdu News</h1>
<ul style="margin-left: 55%; margin-top:-396;float:left; line-height:2;list-style:none;">
<li>
<a href="#">* 10 Year Service Award ceremony</a></li>
<li><a href="#">* PDP Training</a></li>
<li> <a href="#">* ISO 27001 project Kick-off</a></li>
<li> <a href="#">* 2016 Internship Program update</a></li>
<li><a href="#">* WBC Update-- First Reading Salon</a></li>
<li style=" margin-top:190px; margin-left:180px;"><a href="http://www.molex.com/molex/home" style="color:white;">more>>></a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:220;">
<button class="dropbtn"style="margin-left:292px;">Workflow & MIS</button>
<div class="dropdown-content"style="margin-left:105;">
<h1 style="margin-left:50;">Online Workflow:</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none">
<li> <a href="#"> MII</a></li>
<li><a href="#">APS WF Reports</a></li>
<li> <a href="#">PAR Apply (TIS)</a></li>
<li> <a href="#">PAR Applcation (CCS)</a></li>
<li> <a href="#">PAR Application (DSS)<a></li>
<li> <a href="#">Company Chop Application<a></li>
<li> <a href="#">Facility Maintenance<a></li>
<li> <a href="#">Cycle Count Review<a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">MIS:</h1>
<ul style="margin-left: 55%; margin-top:-270;float:left; line-height:2;list-style:none;">
<li>
<a href="#">User ID Application</a></li>
<li><a href="#">Meeting room Booking Guide</a></li>
<li> <a href="#">How to apply mass SAS</a></li>
<li> <a href="#">Office 365 -email- retention policy</a></li>
<li><a href="#">How to report con-call issue or problem to Level 3</a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:410;">
<button class="dropbtn"style="width:120px;height:95px;margin-left:254px;margin-top:0px;background-color:#e6e6e6;"></button>
<img src="molex.png" alt="molex" height="30px" width="100px" style="margin-top: 45; position:fixed; z-index:1;margin-left:268;">
</div>
<div class="dropdown" style="margin-left:451;">
<button class="dropbtn"style="margin-left:334px;">Canteen</button>
<div class="dropdown-content"style="margin-left:-126;">
<h1 style="margin-left:50;">Menu Today</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none; color:white;">
<img src="logo update.jpg">
<li> Lunch:</li>
<li >Dinner:</li>
<li > Midnight:</li>
</ul>
<h1 style="margin-left:466; margin-top:-56; font-size:28px;">Canteen Committee:</h1>
<h1 style="margin-left:465; margin-top:-102px;float:left;">Advices:</h1>
</div>
</div>
<div class="dropdown" style="margin-left:562;">
<button class="dropbtn"style="margin-left:375px;">Activity & Organization</button>
<div class="dropdown-content"style="margin-left:-237;">
<h1 style="margin-left:50;">Activity</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none">
<li> <a href="#">Family day</a></li>
<li><a href="#">Photography Contest</a></li>
<li> <a href="#">Talent show</a></li>
<li> <a href="#">Singing Contest</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Organization</h1>
<ul style="margin-left: 55%; margin-top:-144;float:left; line-height:2;list-style:none;">
<li>
<a href="#">Walfare Committee</a></li>
<li><a href="#">Badminton Club</a></li>
<li> <a href="#">Photography Club</a></li>
<li> <a href="#">Riding Club</a></li>
<li><a href="#">Dancing Club</a></li>
<li> <a href="#">Women's Business Committee (WBC)</a></li>
<li> <a href="#">Corporate Social Responsibility (CSR)</a></li>
</ul>
</div>
</div>
<div class="dropdown" style="margin-left:672;">
<button class="dropbtn"style="margin-left:417px;">Culture</button>
<div class="dropdown-content"style="margin-left:-347;">
<h1 style="margin-left:50;">MBM Column</h1>
<ul style="float:left; margin-right:60%;margin-top:-10;line-height:2;list-style:none">
<li> <a href="#">Introduction of MBM</a></li>
<li><a href="#">MBM Materials</a></li>
<li> <a href="#">MBM in Chengdu</a></li>
</ul>
<h1 style="margin-left:490; margin-top:-60;">Molex Chengdu</h1>
<ul style="margin-left: 448px; margin-top:-114px;float:left; line-height:2;list-style:none;">
<li>
<a href="#">Vision</a></li>
<li><a href="#">Newsletter</a></li>
<li> <a href="#">10 Year Anniversary Magazine</a></li>
<li><a href="等等等等等等.htm" target='_blank'
title="Click here to open a Word document">
Click here to open a Word document</a></li>
</ul>
</div>
</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<img src="1.jpg" alt="molex" height="100%" width="100%">
</div>
</li>
<li><span>Image 01</span>
<div>
<img src="2.jpg" alt="molex" height="100%" width="100%">
</div></li>
<li><span>Image 01</span>
<div>
<img src="3.jpg" alt="molex" height="100%" width="100%">
</div></li>
<li>
<span>Image 01</span>
<div>
<img src="1.jpg" alt="molex" height="100%" width="100%">
</div>
</li>
</ul>
</div>
<h1 style="position:fixed;z-index:1; margin-top:40%;margin-left:30%;"><div id="clockbox" style=""> </div></h1>
<script>
= 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
var today = new Date();
document.getElementById('time').innerHTML=today;
</script>
</body>
</html>
https://jsfiddle.net/yvkdt64o/2/
一种可能的方法是通过CSS实现悬停效果，通过JS实现点击行为，如下所示：
$(document).ready(function(){
$('.my_button').click(function() {
if ( $('.my_tooltip').css('display') === 'block' ) {
$('.my_tooltip').css('display','block');
}
});
});.my_button {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.my_tooltip {
display: none;
background-color: Wheat;
min-width: 160px;
margin-top: 10px;
width: 300px;
padding: 20px;
}
.my_button:hover {
background-color: #F28686;
}
.my_button:hover + .my_tooltip{
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
<button class="my_button">Here</button>
<div class="my_tooltip">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor, dui eu maximus maximus, lacus nulla ornare magna, sit amet ullamcorper enim sapien eget felis. Nam aliquet ultricies eros aliquam pellentesque.</p>
</div>
</div>与您的问题一起发布的代码并没有真正指出您的问题(什么按钮和什么div(，但是一个简单的开放divclick与javascript
将是如果默认divdisplay: none
$(document).ready(function() {
$('.button').click(function() {
$('div').fadeIn(); //could be a .show() or .css("display", "block")
});
});
如果它们是链接，您.preventDefault()
$(document).ready(function(e) {
e.preventDefault();
$('.button').click(function() {
$('div').fadeIn(); //could be a .show() or .css("display", "block")
});
});