Jump to content

Search the Community

Showing results for tags 'hover'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. 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 on
  2. 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
  3. 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?
  4. harry_ord

    Issue on hover

    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.agencialosnav
  5. 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;
  6. 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>
  7. 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 { opa
  8. 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?
  9. james99

    W3.CSS MENU

    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
  10. 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 {col
  11. I've added hover classes to all of the current color themes. Themes.zip
  12. 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-orde
  13. 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 visibi
  14. 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
  15. 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
  16. 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 W3Schoo
  17. 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
  18. 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 wi
  19. Tobm

    Hover Blink

    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(){
  20. 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>
  21. 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-
  22. Greetings, I'm using CSS tags in the head of my pages for changing the opacity of images. I mainly use it for linked images.When I hover over a linked image the opacity changes. I click the link to continue. My problem is with ios devices such as iPads. I understand that hovering on an iPad is not a good design feature and I accept that there is no hover behavior to be expected. But some of my pages do not trigger the links unless I hit the img two times. On most of the pages if I click on a linked img the img blinks quickly (quick hover behavior) and then triggers. On some of the pages I hit
  23. HelloI am a newbie to CSS. I am trying to create a block colour hover when a mouse hovers a whole image. So the image appears normal, then changes to a transparent shade of black over the whole image when hovered over. At the moment it goes white and looks too faded. I still want the image to show under the black - just transparent with some white text on. Can anyone please advise me? This is what I put in my stylesheet: a:hover img {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} This is what I have at the moment: www.kidsmoderndesign.co.uk Thanks
  24. I've been messing around with the map and area elements (for the first time) to build a navigation bar with images, and I've run into a couple problems. The first problem is the images used in the navigation bar aren't aligning in firefox how I think I set them to align. Here is capture, from firefox, showing what I mean: However, they align exactly how I want them to align in all the other major browsers. For instance, here is capture from chrome: The code in question is the cell with the id of navigation. Additionally I would like to be able to create a hover state, and an active state f
  25. how do i size a link so when the mouse rolls over it creates a background column for the length of the page? Tried: <li><a href>1399 </a></li> a:hover{background-color:yellow;background-height: auto;} also tried w/a px value but not use. Saw the effect on a website & wanted to try & recreate it. ( Nope can't find the link I used or i'd ckeck the page source )thank you
×
×
  • Create New...