Search the Community
Showing results for tags 'hover'.
Found 23 results
-
Hi, I am doing a project and want to include text which when you hover over the word, a small image or small box with text appears giving more information. But I don't know what it's called? I have taken this bit from wiki as an example. Although these links just suggest clickable links. But I have seen the underlined in wiki show a little box of text or small image. I hope you know what I mean? I would so appreciate your help! Thank you, Jayne🤠
-
Hi, I am doing a project and want to include text which when you hover over the word, a small image or small box with text appears giving more information. But I don't know what it's called? I have taken this bit from wiki as an example. Although these links just suggest clickable links. But I have seen the underlined in wiki show a little box of text or small image. I hope you know what I mean? I would so appreciate your help! Thank you, Jayne🤠 Thank you for your help. After some research, pleased to say I did it! When I get a chance I will post it here! Thanks w3schools!!😃
-
Hi Guys. This is my first post here so apology in advance (if forum rules being ignore or posted into wrong category). I am trying to display elements on div hover. I had watched a lot of tutorials and practice a lot but still i am struggling with my problem that's why i come here so maybe someone (a Hero) help me. Even sort of direction mean a lot for me Explanation: Actually i am trying to create a something like Character Selector UI in case if you're looking some reference. I want to display hidden content at class="outputr1". If i hover img 1 then it show only hover content 1. And if i hover img 3 then it show hover content 3 and so on. I also want when i hover any div then it should stay active as difficult unless i hover other div like img 1, 2 or 3. it took a month but still i haven't figure it out howto achieve this. what i am missing? <!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover + .hide { display: block; color: red; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"><img src="1.png" width="100px" height="100"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"><img src="2.png" width="100px" height="100"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"><img src="3.png" width="100px" height="100"> <div class="hide"> Display Hover content 3 </div> </div> <div class="hide"> I am Hover Content but i don't want this to display.</div> </div> </body> </html> Sorry about my good English. I am really new to this stuff so i am spending most of my quarantine time in web development skills
-
Hi, in this hover dropdown menu example (https://www.w3schools.com/howto/tryi...ropdown_navbar), the menu words are aligned left starting from 'Home'. Where do you place the 'text-align: center' statement in the coding to shift all the words towards the center of the navigation bar? Somehow it isn't as simple as it seems to me. For your benefit, I attach sample coding in example.html. Thanks for your advice. example.html
-
Hello I'm following the course on w3schools and i stumbled upon this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade I'm wondering how can i do the same but with a group of pictures? like one next to another. I tried adding more images inside the "container" div, but it just change all the pictures inside when i hover on any of them. I'd like the hover to be independant for eac picture, like the text saying "image 1", the next saying "image 2", etc... different overlays for each picture, one next to another. Any help please?
-
Hello This is my website: http://cvkj.agencialosnavegantes.cl/ In the second section ("Nuestros Servicios") i have 3 big buttons that change their backgrounds to purple on hover. The problem i have is why do these buttons appear repeated below, like below every button i have an empty button repeated. Why is this happening? HTML for the buttons <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a></div> Here is the CSS related: .et_pb_button_0.et_pb_button.et_pb_module { width: 290px; border-radius: 50px 50px 50px 50px; padding: 50px ! important; margin: 1%; } .et_pb_button_0 { color: #08a121!important; background-color: #fff; border-width: 1px !important; border-color: #fff; letter-spacing: 0px; font-size: 21px; font-weight: bold !important; } .et_pb_bg_layout_light.et_pb_button_0:hover { color: #fff; background: #574586; } .et_pb_bg_layout_light.et_pb_button_0:hover p { color: #fff; }
-
Hi! I am reading the HTML5 tutorial from www.w3schools.com. All the examples I've tried have worked well, but not the following one: I want to change the link colours of one of my pages. The "visited", "active" and "hover" are working, but not "link", I don't know why. Could anyone help? This is what I have put in a .css file: <style> a:link { color: black; background-color: transparent; text-decoration: none; } a:visited { color: red; background-color: transparent; text-decoration: none; } a:hover { color: green; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> Thanks!
-
Hello, I can't figure out how to pause my animation when the cursor hovers over the slide. Here is my code: <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .mySlides {display:none; height:130px} .w3-left, .w3-right, .w3-badge {cursor:pointer} .w3-badge {height:13px;width:13px;padding:0} </style> <body> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right" > <p>I really enjoyed my experience at LIV. The staff are very professional and friendly. I will be sure to refer some friends</p> <p> -Shaun <p> </div> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right"> <p>I have been welcomed by everyone and shown many kindnesses, along with hints of places to go, things to do and even assurances of safety on the streets as I walked home after the evening sessions. I came, I learned and I grew in my practice. I found peace. You have all carved a big space in my heart.</p> <p> -Debbie <p> </div> <div class="w3-content" style="max-width:600px"> <div class="mySlides w3-animate-right"> <p>I thoroughly enjoyed my first class. Looking forward to trying out the other classes soon. Thank you!</p> <p> -Lorna <p> </div> <div class="w3-center w3-container w3-section w3-large w3-text-white" style="width:100%"> <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div> <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); } </script> </body> </html> What am I missing? Thanks!!
-
The page in question is Here I'm going to have a dozen or so images that I want lined up grid-style. They'll all be sized the same. But, I also want to have the hover overlay that's currently there. CSS is currently: <!-- THUMBNAIL --> <style> .container { position: relative; width: 50% } .image { display: block; margin: 3px; width: 50%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 3px; right: 0; height: 100%; width: 50%; opacity: 0; transition: .5s ease; background-color: #000000; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> HTML for each image is: <div class="container"> <a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="image"></a> <div class="overlay"> <div class="text">Testing This</div> </div> </div> Thoughts?
-
Hello I want to learn to do more stuff like in this Wordpress theme: https://www.anchour.com/ After the video and the heading with white background there's a section with pictures, whenever you hover over a picture they get dark and some text appear on them. How can i do this? i know i can do something with the :hover pseudo-class and put some style there to get the picture darker, but... how can i make text that wasn't there in the first place appear?
-
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
-
Hey, When i test this on W3Schoold it seems to work but it isn't working for me in any browser. What i'm trying to do is have a description block pop up when you hover over a link. I've only put in the code for the first link to test it. But it doesn't seem to work for me. Any help? <!DOCTYPE html> <html> <head> <style> a:link {color:blue; background-color:transparent; text-decoration:none} a:visited {color:cyan; background-color:transparent; text-decoration:none} a:hover {color:darkblue; background-color:transparent; text-decoration:underline} a:active {color:yellow; background-color:transparent; text-decoration:underline} h1 { color: blue; font-family: verdana; } .definition em { font-weight: bold; font-style: normal; } p { font-family: verdana; } li { font-family: verdana; } div.tooltip { background-color: yellow; padding: 20px; display: none; } a.appmetadatasync:hover + div{ display: block; } </style> <!-- <link rel="stylesheet" type="text/css" href="theme.css"> --> </head> <body> <H1>Help Index</h1> <ul> <li><a class="appmetadatasync" href="./appmetadatasync/index.htm" target="_blank">App MetaData Sync Utility - Help</a></li> <div class="tooltip"> <p class="definition"><em>App Metadata Sync</em> is a utility that system administrators and developers can use to synchronize metadata from new sources with the metadata that already exists in the system. This new metadata comes from two primary sources:</p> <ul> <li>Application updates or upgrades</li> <li>Add-on (third-party) products</li> </ul> <p>This metadata is of two types:</p> <ul> <li>Metadata associated with IDO collections and related objects such as tables, properties, and methods. This type of metadata also includes property class and custom assembly metadata.</li> <li>Metadata associated with the application event system. For more information about the application event system and its metadata, see the topic Events Overviews and Processes in the online help for your Mongoose application.</li> </ul> <p>Only metadata associated with an Access As identifier is processed using this utility. For more information about the Access As identifier, see the topic for the Access As Field in the online help for your Mongoose application. </p> </div> <li><a id="appmetadatatransport" href="./appmetadatatransport/index.htm" target="_blank">App MetaData Data Transport - Help</a></li> <li><a id="configmanager" href="./configmanager/index.htm" target="_blank">Config Manager - Help</a></li> <li><a id="formcontrol" href="./formcontrol/index.html" target="_blank">Form Control</a></li> <li><a id="formsync" href="./formsync/index.htm" target="_blank">Form Sync</a></li> <li><a id="idoruntimedevserver" href="./idoruntimedevserver/index.htm" target="_blank">IDO Run Time Dev Server</a></li> <li><a id="replicationtool" href="./replicationtool/index.htm" target="_blank">Replication Tool</a></li> <li><a id="serviceconfigmgr" href="./serviceconfigmgr/index.htm" target="_blank">Service Config Manager</a></li> </ul> </body> </html>
-
I've added hover classes to all of the current color themes. Themes.zip
-
Hi, The website I am currently working on is this: annascherman.com I have set up the image gallery to be an un-ordered list so that I could achieve the irregular grid. I would love for the images to have a slight dark tint on top of them which goes away when you hover over an image (see example here: http://www.wallpaper.com/design/wallpaper-power-200) but for some reason, whenever I add a hover pseudo-element, I get a black background behind the image (I know this because it is also appearing to the right of the image, which I assume has to do with how I set things up as an un-ordered list - it is reading this space as part of the background). What am I doing wrong?!
-
There is a rough sample of what's going on at saczee.com/ZTEST/build20-11.html Pay little attention to the code, though. It deliberately violates "best practices" and is less than half done. It simply gives an idea of what the mega-menu structures are intended to do. Also keep in mind, the positions and sizes of the mega-panels are not fixed - and will change from edition to edition (of an online newspaper). The solution, if there is one, must be something that works independent of other features of containers and their styling. It needs to pretty much confine itself to matters of visibility in hovered and toggled states and invisibility at other times. Setup: Its a routine inline-block navbar. there's underlayment containers for certain function and class switches on the list-items themselves for certain functions (on/off/active/dropdown/etc...) nothing special. the anchors are kept relatively clean and have no function except those without submenus - they serve as links - the others just serve as titles for submenus. Straightforward to that point. There are also two primary types of li links - ones that will have dropdown menus of some sort, others that will have mega-menu like panels that use divs as their principle content containers rather than ul/li submenus. Problem: The problem is handling the event actions on the list items. In particular, the gaps or deadspace if one is in hover mode. The mega-panels may be absolutely positioned anywhere on the page. So, when one hovers a navbar link the panels appear, but in traversing to the panel one must pass through unhovered-space (containers that are not associated (often cannot be) with the navbar structure at all. I can get the panels to appear, I can move them around and size them as I wish. I cannot manage to 1) keep them visible when leaving the link to go to them, 2) keep the link hover style active when I leave the list-item. My visibility is controlled with opacity, visibility and overflow and the panels put in block mode when visible (for a variety of reasons I do not wish to use negative margins or display:none properties to handle visibility.)What I've looked at a lot of toggle featured solutions like bootstrap and such. don't want to use them. Other simpler solutions I've seen with jquery, js and css combinations just miss what I'm trying to accomplish. I'm guessing some combination of css and js will do the trick, but I've no js experience. What I'd settle for: To be able to hover from the li to the separate div panels without losing the hover effect on the link or the visibility of the mega-panel. When the pointer is on the panel, both visibilities should remain. Then, when the hover is removed from the panel the panel should become invisible again and the style on the link go back to its unhovered state. What I'd like is: on hover the link styling for hover lights up and the mega-panel appears (stays on as long as the link is hovered. One can then travel to the panel and both elements remain in hover state. if one then clicks either the link or the panel, both are toggled and retain the hovered state visibility. If either are then clicked, then the panel becomes invisible and the link loses its hover styling when the pointer leaves it. I figure the thing takes a combination of js and css classes to put on the event initiators and their targets. If anyone has seen this somewhere or has/can create something like that, my thanks in advance. I haven't found anything like it elsewhere.
-
Hello, Let's say I have 2 <div>, one wiith id=A and one with id=B I want that, when hovering the mouse cursor to #A, the div #B performs an animation (let's say a transition). Is that possible with CSS? Thanks for reading, tomatoKetchup
-
Hi Forgive me if this is answered on here. I cant find anything, but that's probably because I don't know the proper terminology to search for. If I explain what I want to do, perhaps a kindly sole might guide me in the right direction. I want to use a (single) picture of me and some buddies. I would like to have the user hover over each person, and have text information displayed while the mouse is within a defined area of the picture. I think I remember, during the stone age, Front page allowed the area to be selected with a mouse. I'm using notepad++ now, so like the wife says "I'm completely without a clue". Many thanks AJ
-
Hi, I'm new on here, and looking for some help with HTML, CSS code for how to add mouseOver to an Image with mutliple areas on the same image so that when you hover over certain areas on the diagram, it displays text. I have used plugins for this type of thing where you add hotspots to the image which is fine but not what I'm looking for with this particular project. This website has the sort of thing I'm after - see the interactive graphic on the 'Our Process' page - http://www.moffatts.com/#url I have very basic understandig of html, and css but I'm learning loads on W3Schools!
-
Hi everyone, I am making a section of my webpage so that the image links will go from translucent to opaque during a cursor mouseover. However, there is an unintended effect - a little horizontal line (about 1 pixel by 5 pixels) appears at the lower right corner of the image link during the hover. Does anyone know how to make it so the little line does not appear? You can see the effect on http://www.jasonwangart.com - please see the top part of the sidebar, where the social media icon links are. I observed this effect on: Chrome 35.0.1916.114 Safari 7.0.4 (9537.76.4) Firefox 29.0.1 , all using Mac OS X 10.9.3 I have included an excerpt of the code I used below. I put this block of code inside a "HTML Gadget" in Blogger to create this part of the webpage. Thank you very much! Jason <!doctype html> <style> .jwsidebartopbox { /* code */ } .jwsidebartopbox:after { /* code */ } .jwblank1 { /* code */ } .jwsmlinksblock { /* code */ } img.opacify { opacity:0.4; } img.opacify:hover { opacity:1.0; } </style> <div class="jwsidebartopbox"> <div class="jwblank1"> </div> <div class="jwsmlinksblock"> Jason Wang Art is on: <br/> <br/> <a href="http://www.facebook.com/jasonwangart"> <img class="opacify" src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="30" height="30" alt="facebook"/> </a> <a href="http://twitter.com/jasonwangart"> <img class="opacify" src="http://4.bp.blogspot.com/-u9n6ecjgLqY/U4N0-QazobI/AAAAAAAAAaI/9gQByamXxak/s1600/LOGO+twitter+60+c.png" width="30" height="" alt="youtube" /> </a> <a href="http://plus.google.com/u/0/+jasonwangart1"> <img class="opacify" src="http://4.bp.blogspot.com/-Jc2l5PWP1Uo/U4N09HsH-SI/AAAAAAAAAZ0/e3YcGarRcwQ/s1600/LOGO+google++64+c.png" width="30" alt="google+" /> </a> <br/> /* code */ <br/> /* code */ <br/> </div> </div> </!doctype> -
Hey. I am a beginner in html+css, and so far I have been able to solve everything out with google, but this is where it all stopped. I would like to make a solid color background with three icons on it(they are connections). When you hover the first icon, background color changes to yellow. When you hover second one, background color goes to red etc... what is the best solution for this, considering I would like to make a translation soft (meaning from dark gray to yellow in 0.5second, not instantly). Is that achievable with css or is that something where js comes in? The same goes with a text... i would like it to be clickable and change color on hover, again with transition. Just a simple image, but I guess text is clear enough. Thanks.
-
I am finishing my website but I am still encountering a final problem. The coconut image has a background hover image when the user points the cursor over it, another image appears. Everything works fine, however, when the website is loaded for the first time, there is a fast blink before the hover image is displayed. After that, it works perfectly. How can I fix this issue? Here is the snippet of the code. <script type="text/javascript"> $(document).ready(function() { $('#coconut').hover(function() { $('body').addClass('hover'); }, function(){ $('body').removeClass('hover'); }); }); $(window).scroll(function(event) { $("#nav").css("margin-top", 220-$(document).scrollTop()); }); </script> Please help my website: http://www.tasteofbrazilkc.com
-
Hello, I am very new to CSS and HTML and have been learning since last week, so i hope someone can help me. I have a list, please see the HTML below, I want to make the list item 'Sparkling', sparkle when hovered over. I thought the CSS code below might make it sparkle, but that makes the entire list sparkle on hover - can anyone help me please?! Thank you! HTML<div class="container_12 clearfix"> <div id="header" class="grid_12"> <h1>Lacosta Wines</h1> <div id"nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="">Red</a></li> <li><a href="">White</a></li> <li><a id="sparkle" href="">Sparking</a></li> <li><a href="">Fine Wines</a></li> <li><a href="">Wine Tastings</a></li> </ul> </div> </div> CSSa:hover, #sparkle {background-image:url('http://www.addglitter.com/link-sparkle.gif');}
-
Hello internet. I am having trouble with iPads rendering of my menu bars. I have created a menu bar using .menu class with hover capabilities for a three level menu. It works great except I can’t seem to find out how to hide the second and third level menus within the top level menu for safari. I was able to hide them within the .menu class I created for IE but iPads are showing all three levels of the menu on startup. Please help... This is a sample of how I hid the second level within the top level.menu ul ul {visibility:hidden; position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}I defined the menu bar as:<div class="menu"><ul><li>..etc... and closed the menu bar with </li></ul></div>
