Отобразить / скрыть div на JavaScript

0

Я хочу, чтобы наложение изображений (с текстом) отображалось только при зависании div. Скрывается по умолчанию. По JavaScript, если подходит.

Я попытался дублировать css, давая первый (display: none), а затем второй с: hover и no (display: none), но не работал, поэтому попробуйте с JavaScript добавить/удалить класс (display: none).

Я включил живой URL. Я возвращаюсь к 6 домашним изображениям.

Изображение 174551Изображение 174551

Прямой URL: http://bit.ly/1jl1QaT

HTML

<div class="desc"><p><?=((strlen($r_main['friendlyTitle'])>40)?substr($r_main['friendlyTitle'],0,40).'...':$r_main['friendlyTitle']);?></p></div>
                </div></a>
                <a href="Shopping/"><div class="feature-2">
                    <div class="header"><p>Shopping</p></div>
                    <div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only £19.95 </p></div>
                </div></a>

CSS

#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc { position:absolute; width: 220px; height: 50px  zoom: 1; filter: alpha(opacity=90); opacity: 0.9; background: #333; bottom: 0; margin-bottom: 5px; display: none; }

#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc-show { position:absolute; width: 220px; height: 50px     zoom: 1; filter: alpha(opacity=90); opacity: 0.9; background: #333; bottom: 0; margin-bottom: 5px;  }

JavaScript

$(".desc").hover(
      function () {
        $(this).removeClass("desc-show");
      },
      function () {
        $(this).addClass("desc");
      }
    );
Теги:

4 ответа

2
Лучший ответ

HTML

<div style="background-color:red;">
<div id="blah">DEMO TEXT ON MOUSE OVER</div>
</div>

JAVA-SCRIPT

$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

CSS

#blah {
    width:100px;
    height:100px;
    background-color:green;
    visibility: visible;
    opacity:0;
    filter:alpha(opacity=0);
}

Ссылка на скрипку

Поделиться
  • 0
    Пожалуйста, добавьте немного кода / комментариев в ваш ответ, а не просто ссылку на JSFiddle.
  • 0
    @ Ян обновил :)
Показать ещё 4 комментария
2 
#content-mid .col-2 .features .feature-1{
    border: 1px solid #E5E5E5;
    float: left;
    height: 160px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    width: 220px;
    z-index:-1;
}
#content-mid .col-2 .features .image_holder_home_page{
    height: 160px;
    overflow: hidden;
    position: relative;
    width: 220px;
}

#content-mid .col-2 .features .feature-1 .header{
    background: none repeat scroll 0 0 #0098FF;
    height: 30px;
    position: absolute;
    width: 95.5%;
}

Добавьте код CSS на свой сайт. потому что некоторые элементы погружения переполнены. это исправит эту проблему.

Поделиться
0

Вы CSS, это неправильно. Используйте этот инструмент http://csslisible.com/en/, чтобы прочитать его человеком, и вы увидите, что я имею в виду под "неправильным":

#content-mid .col-2 .features .feature-1 .desc,
#content-mid .col-2 .features .feature-2 .desc,
#content-mid .col-2 .features .feature-3 .desc,
#content-mid .col-2 .features .feature-4 .desc,
#content-mid .col-2 .features .feature-5 .desc,
#content-mid .col-2 .features .feature-6 .desc {
    display: none;
    position: absolute;
    bottom: 0;
    width: 220px;
    height: 50px zoom;
    margin-bottom: 5px;
    opacity: 0.9;
    background: #333;
    filter: alpha(opacity=90);
}

#content-mid .col-2 .features .feature-1 .desc, /* #TIP#: this is here */
#content-mid .col-2 .features .feature-2 .desc, /* #TIP#: this is here */
#content-mid .col-2 .features .feature-3 .desc, /* #TIP#: this is here */
#content-mid .col-2 .features .feature-4 .desc, /* #TIP#: this is here */
#content-mid .col-2 .features .feature-5 .desc, /* #TIP#: this is here */
#content-mid .col-2 .features .feature-6 .desc-show {
    position: absolute;
    bottom: 0;
    width: 220px;
    height: 50px zoom;
    margin-bottom: 5px;
    opacity: 0.9;
    background: #333;
    filter: alpha(opacity=90);
}

Как насчет чего-то проще:

  • нет необходимости в JavaScript,
  • меньше дублирования кода CSS,
#content-mid .col-2 .features .feature-1 .desc,
#content-mid .col-2 .features .feature-2 .desc,
#content-mid .col-2 .features .feature-3 .desc,
#content-mid .col-2 .features .feature-4 .desc,
#content-mid .col-2 .features .feature-5 .desc,
#content-mid .col-2 .features .feature-6 .desc {
    display: none;
    position: absolute;
    bottom: 0;
    width: 220px;
    height: 50px zoom;
    margin-bottom: 5px;
    opacity: 0.9;
    background: #333;
    filter: alpha(opacity=90);
}

#content-mid .col-2 .features .feature-1:hover .desc,
#content-mid .col-2 .features .feature-2:hover .desc,
#content-mid .col-2 .features .feature-3:hover .desc,
#content-mid .col-2 .features .feature-4:hover .desc,
#content-mid .col-2 .features .feature-5:hover .desc,
#content-mid .col-2 .features .feature-6:hover .desc {
    display: block;
}



EDIT: Здесь пример на JSFiddle http://jsfiddle.net/pomeh/9XX46/

Код:

HTML:

<div class="features">

    <a href="Podcasts/">
        <div class="feature feature-1">
            <div class="header"><p>Podcasts</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/city" />
            </div>
            <div class="desc"><p>Podcast Simple Page</p></div>
        </div>
    </a>

    <a href="Shopping/">
        <div class="feature feature-2">
            <div class="header"><p>Shopping</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/food" />
            </div>
            <div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only £19.95 </p></div>
        </div>
    </a>

    <a href="Confessions/">
        <div class="feature feature-3">
            <div class="header"><p>Confessions</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/sports" />
            </div>
            <div class="desc"><p>tttttttttttttttt</p></div>
        </div>
    </a>

</div>

CSS:

.features .feature {
    width: 220px;
    height: 50px zoom;
    margin-bottom: 5px;
    position: relative;
}

p {
    padding: 0;
    margin: 0;
}

.features .feature .header {
    width: 100%;
    text-transform: uppercase;
    color: white;
    margin: 0;
}
.features .feature-1 .header {
    background-color: blue;
}
.features .feature-2 .header {
    background-color: red;
}
.features .feature-3 .header {
    background-color: green;
}

.features .feature .desc {
    display: none;
    opacity: 0.9;
    background: #333;
    width: 220px;
    filter: alpha(opacity=90);
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 5px;
}

.features .feature:hover .desc {
    display: block;
}
Поделиться
  • 0
    Учитывая это, я не буду использовать JavaScript, но, похоже, он не работает. Не показывает div снова при наведении. В данный момент получил эту попытку вживую на сайте.
  • 0
    Попробуйте заменить последние строки на «.feature-1: hover .desc» вместо «.feature-1 .desc: hover».
Показать ещё 1 комментарий
0

попробуйте эту скрипку. Я использовал его так много времени.

$(document).ready(function () {
                $(document).on('mouseenter', '.divbutton', function () {
                    $(this).find(":button").show();
                }).on('mouseleave', '.divbutton', function () {
                    $(this).find(":button").hide();
                });
            });

просто отредактируйте этот код и поместите свой div вместо кнопки.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню