CSS: проблема Hover с текстом, который скрыт из-за переполнения: скрыто? - PullRequest
Новая
       16

CSS: проблема Hover с текстом, который скрыт из-за переполнения: скрыто?

1 голос
/ 17 мая 2010

В моем приложении у меня есть много div, содержащих текст. У всех div-ов переполнение установлено как скрытое, так что пользователь не видит текст, если контейнер недостаточно велик для размещения записи.

Если пользователь хочет увидеть скрытый текст, он должен навести курсор мыши на «коробку». Затем поле раскрывается и показывает текст. Звучит достаточно просто, верно?

Ну, у меня проблемы, и решение, которое я попробовал, не сработало. Проблема заключается в том, что когда пользователь наводит курсор мыши над полем, текст действительно появляется, но остается действительно узким и выходит из нижнего поля, так же, как если бы переполнение было установлено на видимое.

ниже - стандартное CSS, применяемое к блоку div: 

.newevent
{
    overflow: hidden;
    z-index: 0;
}

Я пытался это исправить, установив триггер наведения, когда он активируется, окно расширяется, я думал, что тогда это будет означать, что для отображения текста будет больше места, ниже приведен эффект наведения: 

.newevent div:hover
{
    width: 200px;    
    padding: 50px;
    background-color:#D4D4D4;
    border: medium red dashed;
    overflow: visible;
    z-index: 1;
}

Как мне "перерисовать" текст, когда он наведен, чтобы текст мог использовать новую расширенную область, а не вести себя так, как он все еще находится в узком поле.

1 Ответ

1 голос
/ 17 мая 2010

Вот мое решение.Я использовал библиотеку jQuery, но это можно сделать и с простым старым javascript.

javascript для обработки событий mouseover и mouseout.

<script type="text/javascript">
        $(document).ready(function() {
            $('.box').mouseover(function() {
                $(this).addClass('boxHover');
                $(this).children('.content').addClass('contentHover');
            });

            $('.box').mouseout(function() {                  
                $(this).removeClass('boxHover');
                $(this).children('.content').removeClass('contentHover');
            });
        });    
</script>

Стили для различных состояний элементов div. 

<style type="text/css">
        .box
        {
            width: 200px;
            padding: 50px;
            height: 100px;
            z-index: 0; 
            background: #D4D4D4; 
            border: medium red dashed;             
            margin-bottom: 5px;
        }

        .content
        {           
            height: 100px;   
            overflow: hidden; 
        }

        .boxHover
        {
            z-index: 1;
            height: auto;
            width: 400px;                
        }

        .contentHover
        {
            height: auto;
            overflow: visible;
        }
</style>

Тело HTML.Я удалил содержание здесь, чтобы сохранить ответ кратким, но вы должны добавить текст, чтобы он переполнялся, чтобы увидеть, как работает решение. 

 <body>  
  <div class="box">
    <div class="content">
        Insert content here...
    </div>
  </div>  
  <div class="box">
    <div class="content">
       Insert content here....
    </div>
  </div>  
</body>
...