Jump to content

Search the Community

Showing results for tags 'hover'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (PhpStorm, VS Code, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

Found 5 results

  1. I have this jquery code below. It basically shows a new div when mouse hover over another div. It works. But I noticed that on page load, it sometimes shows 1 or 2 products already hovered and showing the ".show-details" content. This doesn't happen on every page and sometimes it's only 1 product and sometimes it's 2 products. And they vary in the positions on a page. Do you know why it's doing that and how to fix it? By the way, I have ".show-details" set to display: none by default in the CSS file. <script> $(document).ready(function() { $(".product-small").hover(function() { $(this).find('.show-details').fadeIn("fast").css({ display: 'block'}); }, function(){ $(this).find('.show-details').fadeOut("fast").css({ display: 'block'}); }); }); </script>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="magnifier.css"> <script type="text/javascript" src="event.js"></script> <script type="text/javascript" src="magnifier.js"></script> <script type="text/javascript"> var evt = new Event(), n= new magnifier(evt); m.attach({ thumb:'.img', largewrapper:'preview' }) </script> <title>Untitled Document</title> </head> <body onload=""> <div><a class="magnifier-thumb-wrapper" href="http://localhost/niki/products_view.php?prdt_id="><img class="product_img" id="thumb" src=".$image_url." data-large-img-url=".$image_url." data-large-img-wrapper="preview" /></a> <div class="magnifier-preview" id="preview" style="width:300px; height:200px;">$name</div></div> </div> </body> </html> it shows only the image box on mouse event pls help thanks priyanka
  3. Navigation menu hover for contact is correct in chrome but not in Firefox. See the contact us link onhover at last in menu In firefox the hover is not completely white If i increase padding for ".menu_bar ul li:first-child a" menu comes down I dont know where is the problem. My Link:
  4. I really cannot understand it, I've tried several different ways of writing it that I'm sure I've used before, and I simply cannot get :hover to work with any of my divs... html: <a href=''><div id='menu' class='button1'></div></a> <a href=''><div id='menu' class='button2'></div></a> <a href=''><div id='menu' class='button3'></div></a> <a href=''><div id='menu' class='button4'></div></a> css: #menu { width:75px; height:75px; background-color:red; /* background-image:url('menu.jpg'); */ float:left; margin:20px; } .button1:hover { /* background-position:75px 75px; */ background-color:yellow; } as you can see I've commented out the image, ultimately I want the image to appear, but for now I can't get the :hover to change the state of the div at all, no reaction... any help would be much appreciated, its really frustrating me...
  5. Hello fellow coders! I am trying to use tutorials to understand how to make dropdown menus with CSS3. So far so good, except for one little snag. Let me begin by showing you my HTML: <nav id='tabmenu'> <ul> <li><h2><a href='about.php' class='inactive'tabindex='4'>About</a></h2></li> <li><h2><a href='flash.php' class='inactive'tabindex='4'>Flash</a></h2></li> <li><h2><a href='writing.php' class='inactive'tabindex='4'>Writing</a></h2> <ul> <li> <a href='#' class='inactive' id='tech' onclick='toggleWritingType(this)' tabindex='10'>Technical</a> <a href='#' class='inactive' id='jour' onclick='toggleWritingType(this)'' tabindex='9'>Journalism</a> </li> </ul> </li> <li><h2><a href='design.php' class='inactive'tabindex='4'>Design</a></h2></li> <li><h2><a href='webs.php' class='active' tabindex='4'>Webs</a></h2> <ul> <li><a href='#' class='active' id='cobra' onclick='toggleSShots(this)' tabindex='9'>Cobra Cabana</a></li> <li><a href='#' class='inactive' id='hughes' onclick='toggleSShots(this)' tabindex='10'>Hughes, PhD</a></li> <li><a href='#' class='inactive' id='rasche' onclick='toggleSShots(this)' tabindex='11'>Rasche</a></li> </ul> </li> </ul> </nav> So, as you can see I have two submenus, and potentially one more if I can get this working. The tuts I found online created an absolute position for one submenu, which does not apply well to the second menu since they should not be in the exact same location. I think I now have a good understanding about how to use CSS3 to make submenus appear and reappear, but I'm not so clear on the placement. Is there a way to write one rule that applies to any submenu to appear beneath (relative to) it's parent <ul>? Here is my CSS for the nav: #tabmenu { width: 985px; margin: 0 auto 10px; height: 40px; border-bottom: 1px #fff solid; } #tabmenu a{ background-color: #000; color: #fff; width:150px; height:40px; line-height: 40px; float: right; text-align:center; text-decoration: none; } #tabmenu a.inactive:hover { color: #999; opacity: 0.7; filter: alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 1; } #tabmenu a.active, #tabmenu ul a.active { background-color: #fff; color:#000; } #tabmenu ul ul { display: none; } #tabmenu li:hover > ul { //This is the major area of concern, I believe. display: block; top: 40px; position: relative; height: 120px; width: 150px; } I made a fiddle: http://jsfiddle.net/cTcVT/ Thanks!
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.