Plynulá změna pozadí (background-color) při hoveru odkazu

3. 7. 2012 02:19:38

Zdravím,

hledám na Googlu křížem krážem řešení plynulé změna pozadí při hoveru odkazu (background-color), ale nemůžu jej najít. V jQuery plavu, asi to bude fadein a fadeout, ale sestrojit jej nedokážu.

Například na aukru http://aukro.cz v levém menu jej mají.

Nevíte někdo o nějakém examplu?

Děkuji

Něco jsem našel zde http://jsfiddle.net/ecFBK/51/ ale míchá se tam opacity

3. 7. 2012 02:19:38

https://webtrh.cz/diskuse/plynula-zmena-pozadi-background-color-pri-hoveru-odkazu#reply781060

lukio

(3 hodnocení)

3. 7. 2012 05:45:22

Nemáš na mysli CSS3 Transitions?

3. 7. 2012 05:45:22

https://webtrh.cz/diskuse/plynula-zmena-pozadi-background-color-pri-hoveru-odkazu#reply781059

smrtka.smety

(8 hodnocení)

3. 7. 2012 06:15:37

Nene. Mělo by to jít i přes jquery.

3. 7. 2012 06:15:37

https://webtrh.cz/diskuse/plynula-zmena-pozadi-background-color-pri-hoveru-odkazu#reply781058

800XE

(8 hodnocení)

3. 7. 2012 07:27:47

V případě jQuery to bude ideální pomocí switchClass, barvy pak můžeš měnit přímo v CSS:

<!doctype html>
<html>
    <head>
        <meta charset=utf-8 />
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <style>
            a {
                color: Black;
            }
            
            a.hover {
                background: Yellow;
            }
            
            a.hover_on {
                background: LightGreen;
            }
        </style>
        <script>
            $(function() {
                $('a.hover').on({
                    mouseenter: function() {
                        $(this)
                            .stop(true, true)
                            .switchClass('hover', 'hover_on', 500);
                    },
                    mouseleave: function() {
                        $(this)
                            .stop(true, true)
                            .switchClass('hover_on', 'hover', 500);
                    }
                });
            });
        </script>
    </head>
    <body>
        <a
            href="#"
            class="hover"
        >
            test
        </a>
    </body>
</html>

Pokud ti na tom přechodu nezáleží i ve starších prohlížečích, tak CSS3 transitions je taky dobrá volba.

3. 7. 2012 07:27:47

https://webtrh.cz/diskuse/plynula-zmena-pozadi-background-color-pri-hoveru-odkazu#reply781057

Miloslav Lešetický

(10 hodnocení)

3. 7. 2012 07:29:48

A něco podobného i s obrázkem na pozadí: http://css-plus.com/2010/03/fading-navigation-menu/

3. 7. 2012 07:29:48

https://webtrh.cz/diskuse/plynula-zmena-pozadi-background-color-pri-hoveru-odkazu#reply781056

smrtka.smety

(8 hodnocení)

3. 7. 2012 08:59:30