converting css hover to jquery hover -


I am creating a website with hover effects. See the service section in the lower right and see if I'm using the background color to change. I want to use jquery to get the same results with a fantastic result. Here's my HTML:

  & lt; Div class = "iconrow" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "picture / icon 1.png" border = "0" width = "35" /> & Lt; H2 & gt; Website Design & lt; / H2 & gt; & Lt; / A & gt; & Lt; / Div & gt;  

(repeated with duplicate images and lessons 6 times)

Actually, when .ono is rolled over, then I have some background Want to change background color from: #cccccc; And when it is closed, no one returns.

Note: I work through the link provided by you through Firebug Created and tested your solution. If you follow these steps, then you should work it out completely

You can change from any color except the Safari and Firefox 3.5 with transparent And other browsers that support RGBA background colors If you are looking for a cross browser support, then I will attack this problem like this:

1 Your default hover effect is scotched by a non-js class, so a great way to do this as : hover effect will be as follows:

< Pre> & lt; Html class = "no-js" & gt; & Lt; Top & gt; .... meta, title, link tag ... & lt; Script type = "text / javascript" & gt; Document.documentElement.className = "js"; & Lt; / Script & gt; .... Other scripts ... & lt; / Head & gt;

This page changes no-JS to js before displaying it

2. Use jQuery to add dummy elements together a tag ( js to add dummy element is in step 3)

CSS to use is here:

 <.> .js .icon {background: none! Important} / * Hide the current hover effect / / .cononfader {status: Completed; Display area; Left: 0; Top: 0; Width: 100%; Height: 100%; -WebKit-boundary-radius: 10px; -image-radius: 10px; Background color: #ccc; Z-index: 5; } .no {status: relative} / * spans are absolute, parents need to be relatives / /. Identify one {status: relative; Z index: 10} / * Need to sit at the top * /  

3. Fade and out the new dummy element on the mousecenter and mouseleave

  $ ('. Iconow'). Each (function () {var $ span = $ ("& lt; span class = 'iconfader' & gt; & lt; / span & gt;"). CSS ('opacity', 0.0) .appendTo (this); $ (This) .hor (function () {$ span.stop (). Animate ({obscurity: 0.8}, 200);}, function () {$ span.stop (). Animate ({obscurity: 0.0}, 200);});}); Finally, be careful if you decide to use an image background instead of solid color IE7 and IE8 can not change the ambiguity of 24bit PNG files It is completely transparent Gives screws to 


Comments

Popular posts from this blog

c# - How to capture HTTP packet with SharpPcap -

jquery - SimpleModal Confirm fails to submit form -

php - Multiple Select with Explode: only returns the word "Array" -