Jump to content

Search the Community

Showing results for tags 'hover'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • The Web Designer Forum Community
    • Web Designer Forum News
    • Web Designer Forum Introductions
    • General Chat
    • Design Competitions
  • Web Design Resource
    • Website Design and Layout
    • Website Reviews and Feedback
    • Other Resources
    • Graphic Design Forum
  • Web Development
    • Frontend
    • Server Side
    • Content Management Systems (CMS)
  • SEO, Website Marketing and Business
    • Social Media
    • Freelancing, Business and Legal Discussion
    • SEO (Search Engine Optimisation) & Search Engines
    • Website Management
  • Software & Hardware
    • Web Browsers
    • Web Design Scripts & Software
    • Web Development Scripts & Software
    • Hardware
  • The Marketplace

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL




Found 12 results

  1. Demonolith

    Keep hover colour after tap on phones

    Hi all, I have an SVG map and would like to have it so that when on a phone if a user taps a region the colour will change and remain that colour until another colour e.g. Region begins as #ff0000 When tapped changes to #ffff00 Stays that colour until another region is tapped Here is the map (towards the bottom of the page) - excuse how it looks on screens larger than 640px, right now I'm focusing on phones. And here's my CSS: a svg:focus #brackaghnorth { fill: #ff0000; pointer-events: none; } a svg:hover #tievebrack { fill: #ffff00; pointer-events: none; } a svg:hover #tievenameena { fill: #0000ff; pointer-events: none; } a svg:hover #liggins { fill: #ff3366; pointer-events: none; } a svg:hover #ligatraght { fill: #009900; pointer-events: none; } a svg:hover #keerin { fill: #ff00ff; pointer-events: none; } a svg:hover #oaghmonicrory { fill: #ff9900; pointer-events: none; } a svg:hover #teebaneeast { fill: #9933cc; pointer-events: none; } a svg:hover #carnanransy { fill: #ccff00; pointer-events: none; } a svg:hover #crouck { fill: #0033cc; pointer-events: none; } a svg:hover #alwories { fill: #00ffff; pointer-events: none; } a svg:hover #monanameal { fill: #cc0000; pointer-events: none; } a svg:hover #aghascrebagh { fill: #ccffff; pointer-events: none; } a svg:hover #crockanboy { fill: #ff9900; pointer-events: none; } a svg:hover #sheskinshule { fill: #ffff99; pointer-events: none; } a svg:hover #formil { fill: #33ff00; pointer-events: none; } a svg:hover #binnafreaghan { fill: #cc0000; pointer-events: none; } a svg:hover #cashel { fill: #9966ff; } a svg:hover #backan { fill: #00ff00; } a svg:hover #brackaghsouth { fill: #ffff00; } a svg:hover #leaghan { fill: #00ffff; } a svg #brackaghnorth, a svg #tievebrack, a svg #tievenameena, a svg #liggins, a svg #ligatraght, a svg #keerin, a svg #oaghmonicrory, a svg #teebaneeast, a svg #carnanransy, a svg #crouck, a svg #alwories, a svg #monanameal, a svg #aghascrebagh, a svg #crockanboy, a svg #sheskinshule, a svg #formil, a svg #binnafreaghan, a svg #cashel, a svg #backan, a svg #brackaghsouth, a svg #leaghan { transition: 200ms; transition-timing-function: ease-in-out; -webkit-transition: 200ms; -webkit-transition-timing-function: ease-in-out; }
  2. jmerlinb

    Weebly custom HTML/CSS help?

    Dear all, Would anyone be able to tell me how to edit the HTML of my Weebly website's banner image (the bike in the rain)? I know it must be somewhere under Design > Edit HTML/CSS, but as I have little HTML knowledge, I am unsure where to look. If it helps, the end game is to make the banner image interactive (so that it changes back and forth between two images upon mouse over or clicking). Take a look: www.lightcycles.xyz
  3. disissid


    Hilariously creative, more information hover effect with CSS!!! Searching for a cool hover effect to show up more information on your image or any div. You are at the right place. Imagination is more important than knowledge. -Albert Einstein Let us first imagine and make a hilreative blueprint of what we gonna make, and what we gonna need to do so. Hilreative Blueprint > A more info box that will be hidden initially and will show up on hover with our information. > Now that can be done by translating the info box out of the container initially and by translating back it on hover. Lets start with our HTML code. <div class="container"> <div class="moreInfoBox"> <div class="category">CSS</div> <div class="moreInfo">Easiest way to make 3-D like buttons using CSS in just 3 steps!!!</div> <div class="author">By: Kumar Siddharth</div> </div> </div> Hilreative Trick > Transformation VS Transition Transformations are different form of animations which transforms(changes) the physical appearance of an element(viz. scaling,rotating,translating). Whereas a transition property initiates any change applied on 'change of state'(viz. on click,on hover etc) and fill in between appearances of element all by itself. .container{ margin:5px auto; background:url('http://3.bp.blogspot.com/-B7ORnKMRdno/U6uhv-xUFxI/AAAAAAAAB10/4eCsO4Gct0U/s1600/3dbuttons.PNG'); background-size:cover; background-repeat:no-repeat; border:solid 2px #3c404b; width:320px; height:231px; border-radius:5px; overflow:hidden; } .moreInfoBox{ color:white; background:rgba(245,245,245,0.5); width:100%; height:100%; transform:translateX(-322px); transition:transform 1s ease-in-out; position:relative; font-size:25px; } Hilreative Trick > How to center a div horizontally? Give top and bottom margin as per your requirement but right and left,'auto' so that it will automatically adjust itself to the center. Overflow is hidden to hide any element going out of 'container' div(its parent element). Initially 'moreInfoBox' is translated out of the 'container' to left. Background is given with opacity of '0.5' to show the context of information being shown. Note: I have not used any kind of vendor prefixes for the sake of simplicity, do use them with your browsers,especially with the transformation and transition properties. .category{ padding:5px; background:#686868; transform:translateY(-45px); transition:transform 1s ease-in-out 1s; } .moreInfo{ padding:5px; margin-top:20px; color:black; } .author{ padding:5px; background:#EC5D93; position:absolute; bottom:0px; width:100%; box-sizing:border-box; transform:translateY(45px); transition:transform 1s ease-in-out 2s; } All the information in our info box has been styled now,name of the 'category' has been translated upwards and the 'author' downwards from their initial position which on hover will come back to their original position. So finally lets do that Hilreative thing. .container:hover .moreInfoBox,.container:hover .category, .container:hover .author{ transform:translateX(0px); } On hovering over the container the info box along with information will come back to their original position via transition and transformation properties given to each element. Yeah! you have made a hilariously creative div with more-info hover effect!! original article do like our facebook page.
  4. piXelDesigns

    Dropdown menu porblems and such

    CSS: ul{ padding: 0; list-style: none; margin-top: 0px; } ul li{ float: left; text-align: center; line-height: 56px; } ul li a{ display: block; color: #333; background: #2A2A2A; text-decoration: none; height:56px; padding-right: 15px; padding-left: 15px; } ul li a:hover{ color: #fff; background: #191919; } ul li ul{ display: none; } ul li:hover ul{ display: block; width:50px; } HTML: <ul> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li> <a href="#">Social</a> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">YouTube</a></li> <li><a href="#">Behance</a></li> </ul> </li> </ul> The dropdown buttons isn't the same size and i need the home buttons to remain blue(00add3) all the time. Anyone able to help? Thanks
  5. piXelDesigns

    How do I fix this dropdown menu?

    So, I'm not that good in HTML and studd and i was trying to make a dropdown menu, but it's visible all the time? You can see it here: http://test.pixeldesignz.net/ Would be grateful if you're able to find a fix for me Thanks!
  6. I have a weird problem going on. When I first load up the site, everything seems to be fine. Then I hover over one of the nav buttons and 3 of the 4 main container elements seem to shift to the left a few pixels (well it looks more like a percentage rather than a fixed measurement). Once the first re-alignment happens. Nothing happens again till you refresh the page or go onto another page where the same thing will happen. All the elements are fine till you hover over a nav element where it will then shorten the width of 3 of the 4 elements. I feel my inexperience has gotten me into a bit of a pickle and was wondering if someone could spot where my css conflicts with my idea of how the page should look. Below is a pic giving you a visual representation of the problem. In the pic I drew some guidelines so you might see the problem. Below are copies of actual HTML and CSS files if you need it to reproduce the error HTML: CSS:
  7. Hi All, Ok, have a strange problem here that i'm hoping someone will be able to shed some light on. The site in question is here: http://tlt.voltronik.co.uk - Please scroll down to the Latest Clip / Most Popular Clips section. There are a few videos that when hovered over, should play. I've set the poster to be a relevant frame of the video so that they won't always use the first frame as it's not always the most appropriate. Here's the code i'm using to do this: var vid = document.getElementsByClassName("video-hover"); [].forEach.call(vid, function (item) { item.addEventListener('mouseover', hoverVideo, false); item.addEventListener('mouseout', hideVideo, false); }); function hoverVideo(e) { this.play(); } function hideVideo(e) { this.pause(); } The problem is (as you might have already discovered) is that sometimes the posters show and sometimes they don't. Sometimes they all load without fail and sometimes none of them do. Most of the time however, when they do show, you hover over a video and nothing happens. You have to move the mouse cursor off of the video, then re-hover over the video for the video to play. I attempted to compensate for the posters not showing by setting a background image of the poster to sit behind the video but this doesn't seem to show properly either. I don't think it's anything to do with the rgba background or the parallax style video playing behind because this behaviour is also visible on the 'Timelapse Clips' page too. Can anyone shed any light on why this might be happening? Thanks for any help in advance - it really is appreciated! Jack
  8. I have created a table with 7 rows, and 2 columns to display some opening times on my website. I'm trying to set it up so that when someone hovers the mouse over a row, the row changes colour. The problem I'm having is that when I hover my mouse over any of the rows the colour does change, but you can see a line down the middle of the table (where column 1 finishes, and column 2 starts), is there anyway I can stop this happening? This is the CSS I have: .table tr { background-color: #006; color: #FFF; } .table tr:hover { background-color: #06F; color: #FFF; } This is the HTML I have: <table width="250" border="0" class="table"> <tr> <td width="84">Monday</td> <td width="156">Closed</td> </tr> <tr> <td width="84">Tuesday</td> <td width="156">10:00am until 5:00pm</td> <tr> <td>Wednesday</td> <td>10:00am until 5:00pm</td> </tr> <tr> <td>Thursday</td> <td>10:00am until 7:00pm</td> </tr> <tr> <td>Friday</td> <td>10:00am until 5:00pm</td> </tr> <tr> <td>Saturday</td> <td>11:00am until 5:00pm</td> </tr> <tr> <td>Sunday</td> <td>11:00am until 5:00pm</td> </tr> </table> I've tried changing the CSS to this: .table tr { background-color: #006; color: #FFF; border: none; } .table tr:hover { background-color: #06F; color: #FFF; border: none; } But this doesn't work either. Is there anything else I can try? Thank you for any help. P.S. I've also tried setting the border colour to the same as the background colour on my web page, but again that doesn't work.
  9. I have a div tag called "footer", which I have applied a link style to (I only want this div tag to have this styling for the links). This is the CSS code I have written. #footer a:link {color: #030; text-decoration: underline;} #footer a:hover {color: #090; text-decoration: none;} #footer a:visited {color: #030; text-decoration: underline;} I want the visited link to be the same colour as the 'normal' link and also have the same styling as the hover link when the mouse moves over it. I have tried deleting the "a:visited" rule, but when I view the page in my internet browser it just shows the default style for visited links. But if I do it as above and view the page in my internet browser, when I hover my mouse over a link that I have visited, it doesn't use the same style as the "a:hover" link (which is what I want it to do). Basically, when you have visited a link, I want it to behave exactly the same as the other links which haven't been visited (using the same styles, even when you hover over it). But I can't get the "a:visited" link, to follow the "a:hover" style. Can it be done? Thank you for any help.
  10. In nextgen gallery I wanna have a description display on a THUMBNAIL IMAGE on hovering. Please help me!
  11. Hi there... I'm currently using wordpress to create a website and haven't had many issues using CSS to get the designs I wanted set into place. The problem i'm having is that I can't seem to remove the rollover effect from tables placed within my content. It's somehow related to the same effect used when rolling over the drop down menu. I'v made a test page with a table if you guys would like to have a look: http://www.underground-revolutions.com/test-page Many thanks - Shutts
  12. I need a help in java script and css, This is what I want to happen when I hover my cursor on a text link then one of the image should change or swap an image. example for this website: http://www.faithconnexion.com/ try to hover the cursor on the navigation on the right side. Please I need your help guys.