JQuery Hover Toggling - PullRequest
Новая
       11

JQuery Hover Toggling

0 голосов
/ 31 марта 2012

Я пытаюсь использовать этот jQuery для активации моих css-переходов.Кроме того, при наведении курсора на элемент div, я хотел, чтобы он активировал переход другого элемента div, называемого box_content.

Любая помощь будет оценена.Спасибо! 

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
        div.box{
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: #0F0;
            opacity: .3;
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }

        div.box.active{
            opacity: 1;
        }

        div.box_content{
            -webkit-transition: all 1.5s ease-in-out;
            -moz-transition: all 1.5s ease-in-out;
            transition: all 1.5s ease-in-out;
            opacity: 0;
        }

        div.box_content.active {
            opacity: 1;
        }
    </style>

    <script>
        $(document).ready(function() 
            $('div.box').hover(function() {
        $('div.box').toggleClass('active');
        $('div.box_content').toggleClass('active');
        }
    </script>
</head>
<body>
        <div class="box"></div>
        <div class="box_content">Content</div>
</body>

Ответы [ 2 ]

1 голос
/ 31 марта 2012

У вас были некоторые синтаксические ошибки в вашем jQuery. Если вы исправите это, это работает. http://jsfiddle.net/michaeljimmy/brmF3/

$(document).ready(function() {
    $('div.box').hover(function() {
        $('div.box').toggleClass('active');
        $('div.box_content').toggleClass('active');
    });
});
0 голосов
/ 31 марта 2012

Вот, пожалуйста.:) Вы пропустили несколько фигурных скобок, которые выдавали ошибку.

Вы можете поиграть с этим здесь: 

    $(function() {
        $('div.box').hover(function() {
          $(this).toggleClass('active');
          $('div.box_content').toggleClass('active');
        });
    });
...