Mouse Over / Mouse Out на DIV

Question

У меня есть следующие 3 колонки:

       <div id="outerwrap">
            <div id="innerwrap">      
               <div id="centerc">...</div>          

               <div id="rightc" style="font-weight:bold">
            </div>
            <div style="background-color:White;height:10px;top:284px;left:0px"></div>

            <div id="leftc">..</div>
       </div>
       <div id="footer"">...</div>

    #outerwrap
    {
       background-color: #EE44E7;
    }

    #innerwrap
    {
       background-color: #EE44E7;
       margin-right: 200px;
       top:0px;
       height:100%;
    }


    #leftc
    {
       position: absolute;
       top: 111px;
       left: 0px;
       width: 197px;
       background-color: #EE44E7;
       font-size: 10px;
    }

    #centerc
    {
       position: relative;
       margin-left: 199px;
       padding: 0px;
       background-color: white;
    }

    #rightc
    {
       position: absolute;
       top:111px;
       right: 0px;         
       width: 199px;
       color: blue;
       background-color: #EE44E7;
       font-size: 10px;
    }


    #footer
    {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 62px;
    visibility: hidden;
    }

То, что я планирую сделать, это загрузить страницу с левым div (div id = "leftc") в полупрозрачном состоянии, например, просто показывая 10% от div. Когда пользователь наводит указатель мыши на него, элемент div должен расширяться до своего нормального уровня, а при выходе из мыши он должен возвращаться в свое полупрозрачное состояние. Похоже, поведение автоматического скрытия

Как мне добиться этого наилучшим образом в нескольких браузерах и с использованием jQuery или CSS?

Answer 1

Простым решением будет использование метода jQuery height , но это может испортить ваш макет, если вы не будете осторожны с HTML, который находится внутри #leftc. Переполнение: здесь может помочь скрытое.

Вы можете использовать свойство css clip , плюс jQUery's hover . При наведении курсора мыши, удалите клип, при наведении мыши примените клип. Если вы хотите оживить его (что является следующей блестящей прогрессией :)), то для этого также есть плагин jQuery .