Меню ролловера изображений и текста работает только на одном

Question

Меню ролловера изображений и текста работает только на одном

0

У меня есть меню опрокидывания, которое отображает дни недели. Они изначально сидели счастливо бок о бок друг с другом с изображением, которое появилось, когда зависло. Теперь я пытаюсь получить текст и изображение, чтобы появиться, когда вы наведите курсор на день. Текст работает в первый день ("Чт"), но остальная часть дней не появляется, и фоном изображения наведите.

Что я делаю не так? Pls идет легко на меня, я пытаюсь!

Я также сделал jsfiddle (так выглядело меню)

HTML-код

  <div id="nav">
  <ul class="menu">
  <li>
  <div class="img1 left"> <a href="" id="thursButton" class="thursButton"></a>

  <p>Somewhere Only We Know Lily Allen
  <br/>Story Of My Life One Direction
  <br/>
  </p>
  </div>
    </li>
    <li>

<div class="img2 left"> <a href="" id="friButton" class="friButton"></a>

 <p>Somewhere Only We Know Lily Allen
 <br/>Story Of My Life One Direction
 <br/>
 </p>
  </div>
  </li>
  <li>

CSS

#nav {
display:inline;
list-style: none;
position: fixed;
width: 1290px;
margin: 0 auto; 
left:0px; 
right:0px;
float:clear;
top: 120px;
z-index: 1000;

}
.menu li {
display: inline;
vertical-align:top; 
float:left;

 }
.menu li a {
display: block;
height: 407px;
width:250px;
text-indent: -999999px;
}
.img1 {
width: 250px;
height: 407px;
position: relative;
}
 .thursButton {
  width:250px;
  height:177px;
  display:block;
  }
  #thursButton {
  background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
  }
  .thursButton:hover {
   background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
  }
.img2 {
width: 250px;
height: 407px;
position: relative;
}
.satButton {
width:250px;
height:177px;
display:block;
}
#satButton {
background-image:url(http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');
}
.satButton:hover {
 background-image:url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');
}
.left p {
color: #FFFFFF;
display: none;
font-size: 18px;
left: 10px;
position: absolute;
text-shadow: 1px 1px 1px #000000;
top: 100px;
width: 250px;
}
.left:hover p {

display:block;
}

Social Monster 13 дек. 2013, в 17:18

Источник

0

Много ошибок в вашем HTML. должен быть . Вы закрываете и <a> дважды ...
FLX 13 дек. 2013, в 15:33
0

  обычно принимается как использование du jour ( stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br ) Но jsfiddle всегда жалуется. Он отлично подходит для документов HTML, если не XHTML, его следует использовать против  
SW4 13 дек. 2013, в 15:35
0

Как минимум, ваша разметка списка недействительна.
isherwood 13 дек. 2013, в 15:37
0

@ExtPro Вы правы, но я все еще считаю, что для лучшей переносимости мы всегда должны использовать закрывающий.
FLX 13 дек. 2013, в 15:38
0

В твоей скрипке только Thu . Как мы можем проверить другие дни? Кроме того, вам действительно нужны фоновые изображения, чтобы ваш текст выглядел так?
tewathia 13 дек. 2013, в 15:40
0

@tewathia, там тоже пт .. просто прокрутите вниз
Social Monster 13 дек. 2013, в 15:41
0

@ExtPro Я удалил , но остальная часть меню все еще не появляется
Social Monster 13 дек. 2013, в 15:44

Показать ещё 5 комментариев

Теги:

html

css

1 ответ

Ещё вопросы

Много ошибок в вашем HTML. должен быть . Вы закрываете и <a> дважды ...
  обычно принимается как использование du jour ( stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br ) Но jsfiddle всегда жалуется. Он отлично подходит для документов HTML, если не XHTML, его следует использовать против  
Как минимум, ваша разметка списка недействительна.
@ExtPro Вы правы, но я все еще считаю, что для лучшей переносимости мы всегда должны использовать закрывающий.
В твоей скрипке только Thu . Как мы можем проверить другие дни? Кроме того, вам действительно нужны фоновые изображения, чтобы ваш текст выглядел так?
@tewathia, там тоже пт .. просто прокрутите вниз
@ExtPro Я удалил , но остальная часть меню все еще не появляется

WP_ · Accepted Answer · 2013-12-13T14-18-00.000Z

Полагаю, это выглядит несколько презентабельно:

HTML

<div id="nav">
    <ul class="menu">
        <li>
            <a href="#" id="thursButton" class="thursButton">
                <div class="img1 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" id="friButton" class="friButton">
                <div class="img2 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" id="satButton" class="satButton">
                <div class="img3 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
    </ul>
</div>

CSS

#nav {
    display:inline;
    list-style:none;
    position:fixed;
    width:1290px;
    margin:0 auto; 
    left:0px; 
    right:0px;
    float:clear;
    top:120px;
    z-index:1000;
}

.menu li {
    display:inline;
    vertical-align:top; 
    float:left;
}

.menu li a {
    display:block;
    height:407px;
    width:250px;
}

.img1 {
    width:250px;
    height:407px;
    position:relative;
}

.thursButton {
    width:250px;
    height:177px;
    display:block;
}

#thursButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}

#thursButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
}

.img2 {
    width:250px;
    height:407px;
    position:relative;
}

.friButton {
    width:250px;
    height:177px;
    display:block;
}

#friButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/9dtmxhsw1/fri.png');
}

#friButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/dCtmxht0o/fri-hover.png');
}

.img3 {
    width:250px;
    height:407px;
    position:relative;
}

.satButton {
    width:250px;
    height:177px;
    display:block;
}

#satButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');
}

#satButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');
}

.left p {
    color:#FFFFFF;
    display:none;
    font-size:18px;
    left:10px;
    position:absolute;
    text-shadow:1px 1px 1px #000000;
    top:100px;
    width:250px;
}

.left:hover p {
    display:block;
}

Было несколько ошибок с неправильно закрытыми тегами.

Я предлагаю использовать HTML или CSS Validator для устранения будущих проблем:

http://validator.w3.org/ Для HTML

http://jigsaw.w3.org/css-validator/ Для CSS

Ах, хорошо, поэтому я позиционирую img как «относительный», а кнопка «display: block»?
Как вы получаете изображение при наведении курсора? Я создал раздел наведения, но он показывает только оригинальный IMG
также я очистил мой HTML jsfiddle.net/arp8D/7 спасибо за эти две ссылки :)
Я обновил свой ответ. Должно работать лучше сейчас. Я предлагаю приобрести текстовый редактор, такой как Notepad ++, чтобы вы могли заметить ошибки благодаря подсветке синтаксиса. Это делает вашу работу намного проще, а также бесплатной.
Удивительно, спасибо @WP_. Просто так я понимаю и могу учиться для будущих ссылок - вы удалили текстовый отступ и добавили знак # вместо. на зависании?
Да. text-indent является избыточным, поскольку -тексты уже настроены для display:none; , Я изменил всплывающие подсказки на id (#), а не классы (.). Вы использовали код CSS для классов «thursButton», «friButton» и «satButton», чтобы установить их фоновое изображение. Но вы также использовали идентификаторы, чтобы изменить фоновое изображение при наведении курсора. Это не работает вообще. Либо используйте классы или идентификаторы, но не оба при использовании псевдоклассов, таких как :hover или :focus для конкретного элемента. Практика делает идеальным!
Спасибо, @WP_! Ваша помощь была неоценима!
Могу ли я приставать к вам немного дольше? В меню выбито выравнивание контента сайта tinyurl.com/o46hj3b . Есть идеи почему?
Я предлагаю вам получить хороший инструмент разработчика, такой как FireBug, если вы используете Firefox. Многие браузеры уже имеют встроенный инструмент разработчика, который можно использовать, нажав F12. Используйте кнопку инспектора элементов (обычно это стрелка и квадратный значок), а затем щелкните любой элемент на своей странице, чтобы просмотреть HTML-код и правила CSS, которые на него влияют. Я также рекомендую исправить ошибку DOCTYPE на вашей веб-странице перед выполнением любой тяжелой работы. Если DOCTYPE неверен, ваш код не будет работать так, как вы ожидаете.
еще раз спасибо. Вы были фантастической помощью
Извините, @WP _... последний вопрос, обещаю. Когда я наведу курсор на текст, изображение при наведении исчезнет tinyurl.com/o46hj3b. Я проверил с помощью firebug и не увидел ничего необычного: - /