james99 Posted July 19, 2016 Share Posted July 19, 2016 is there a way to use this http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_dropdown_hover with http://www.w3schools.com/w3css/w3css_tabulators.asp i've been working on it for weeks and i cant figure it out i wanna make the content show on hover please help Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2016 Share Posted July 19, 2016 Just change 'onclick=' to 'onmouseover='. Link to comment Share on other sites More sharing options...
james99 Posted July 19, 2016 Author Share Posted July 19, 2016 pal, i've been working on this for weeeks! i cant beleive it was that easy! thank you so much. btw is there a way to not show the content when im not hovering anything Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2016 Share Posted July 19, 2016 <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <div class="w3-container"> <h2>Tabs</h2> <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p> </div> <ul class="w3-navbar w3-black"> <li><a href="#" onmouseover="openCity('London')" onmouseleave="openCity('hideme')">London</a></li> <li><a href="#" onmouseover="openCity('Paris')" onmouseleave="openCity('hideme')">Paris</a></li> <li><a href="#" onmouseover="openCity('Tokyo')" onmouseleave="openCity('hideme')">Tokyo</a></li> </ul> <div id="London" class="w3-container city"> <h2>London</h2> <p>London is the capital city of England.</p> </div> <div id="Paris" class="w3-container city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="w3-container city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> <script> openCity("London") function openCity(cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } if(cityName !=="hideme") { document.getElementById(cityName).style.display = "block"; } } </script> </body> </html> Link to comment Share on other sites More sharing options...
james99 Posted July 19, 2016 Author Share Posted July 19, 2016 (edited) thank you! Edited July 19, 2016 by james99 Link to comment Share on other sites More sharing options...
james99 Posted July 19, 2016 Author Share Posted July 19, 2016 (edited) thanks Edited July 20, 2016 by james99 Link to comment Share on other sites More sharing options...
james99 Posted July 20, 2016 Author Share Posted July 20, 2016 (edited) thanks Edited July 20, 2016 by james99 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now