All geek questions in one place

Convert css hover to jquery hover

I am creating a website with freezing effects. See http://vitaminjdesign.com/index.html and see the services section in the lower right corner. I use: hover to change the background color. I want to use jquery to achieve the same result with elegant fading. Here is my html:

<div class="iconrow">
   <a href="#"><img src="images/icon1.png" border="0" width="35" />
   <h2>Website Design</h2></a>
</div>

(repeated 6 times with different images and text)

Basically, when .iconrow is upside down, I want the background to change from none to background color: #cccccc; and when he rolls back, it’s no use.

+3
source share
2 answers

. Firebug . ,

transparent , Safari Firefox 3.5, , RGBA. -, :

1. , non-js, :hover . :

<html class="no-js">
   <head>
     .... meta, title, link tags ...
     <script type="text/javascript">document.documentElement.className = "js";</script>
     .... other scripts ...
   </head>

no-js js, .

2. jQuery a (js, 3)

CSS :

.js .iconrow { background: none !important } /* Hide current hover effect */

.iconfader {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background-color: #ccc;
  z-index: 5;
}

.iconrow { position: relative } /* Spans are absolute, need the parent to be relative */
.iconrow a { position: relative; z-index: 10} /* Needs to sit on top */

3. mouseenter mouseleave

$('.iconrow').each(function(){
   var $span = $("<span class='iconfader'></span>").css('opacity',0.0).appendTo(this);
   $(this).hover(function(){
       $span.stop().animate({opacity: 0.8}, 200);
   }, function(){
       $span.stop().animate({opacity: 0.0}, 200);
   });
});

, , . IE7 IE8 24- PNG . .

0

jQuery: http://plugins.jquery.com/project/color

-

$(".iconrow").hover(
    function() {
        $(this).animate( { "background-color": "#ccc" }, normal );
    },
    function() {
        $(this).stop(true, true).animate( { "background-color": "#fff" }, normal );
    }
);

EDIT:

dcneiner, , , , "none" , . , "none" - undefined. #fff , , .

:

animate(params, [duration], [easing], [callback])
+4

Source: https://habr.com/ru/post/1724798/

More articles:


All Articles