Показывать div при наведении курсора мыши

#css #html

#css #HTML

Вопрос:

Название может немного вводить в заблуждение.

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

При наведении курсора на изображение в jsfiddle отображается скрытый div, и это именно то, как я хочу, чтобы это выглядело, но если я уберу тег h3 из текста, я, похоже, не смогу оформить его с помощью CSS.

Должен ли я искать альтернативу Jquery? Если это так, любые руководства были бы отличными, спасибо

ОБНОВЛЕНИЕ: Спасибо за всю помощь, но я не думаю, что я объяснил очень хорошо.

http://imageshack.us/photo/my-images/827/examplewc.jpg/

Левая сторона — это то, как я хотел бы, чтобы она была оформлена, однако удаление тегов h3 и удаление h3 из class .info приводит к тому, что она оформляется как с правой стороны. Меня больше всего беспокоит ширина границы, расположение и заполнение

1. Я не в состоянии воспроизвести проблему, с которой вы, похоже, столкнулись… смотрите эту обновленную скрипку: jsfiddle.net/Wexcode/whb8A/3

2. Предполагается, что там должна быть «белая полоса» (граница)?

3. что не так с этим

4. Я должен быть более конкретным. В оригинальной скрипке, когда черный div отображается вместе с текстом, под текстом находится рамка размером 5 пикселей, которая занимает ширину div. Поля и отступы в .info h3 создают границы, но без тегов h3 граница просто проходит по нижней части черного div без полей

5. @luca, единственная проблема в том, что код неправильный и он не проверяется. Я просто надеялся, что будет правильный способ сделать это

Ответ №1:

Другое решение — поместить определения стиля текста непосредственно под <a> тегом, чтобы переопределить стиль тега привязки по умолчанию. Пример:

 .featured a {
    color: #fff;
    text-transform: uppercase;
}

Ответ №2:

Если кому-то интересно, я решил проблему.

Вместо того, чтобы использовать теги h3 и span, я удалил оба и вместо этого поместил div внутри div, который появлялся при наведении. Вы можете увидеть, что я имею в виду, в приведенной ниже скрипке. Теперь выполняется проверка в html5, чего я и добивался, спасибо за всю помощь

http://jsfiddle.net/whb8A/62/

Ответ №3:

Все, что я вижу, когда удаляю <h3> тег, — это потерю поля вокруг текста. Если вы хотите это вернуть, просто замените <h3> на <span> , измените CSS, чтобы он соответствовал этому вместо h3 и добавьте display: block в правило.

Ответ №4:

У вас есть это ближе к концу вашего CSS:

 .item a:hover .info {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 30px;
    width: 250px;
    margin: 0;
    padding: 10px;
    background: #000;
}

Это выделит все .info элементы внутри наведенных a тегов внутри .item элемента, но в вашем HTML у вас их нет.элемент item

Удалите .item из CSS, и все будет хорошо, когда вы удалите H3

1. .элемент использовался для класса span?

2. Прошу прощения, .item не должно быть в коде css. Но если я удалю теги h3 из html и из класса .info h3 jsfiddle.net/whb8A/34 граница оформлена не так, как это было раньше