Блог

Главная - Вопросы по программированию - как оформить кнопку изображения на панели навигации, например, при наведении курсора, ссылка, изображение изменит шаблон

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

#html #css #button

#HTML #css #кнопка

Вопрос:

Я хочу, чтобы при наведении, активном и посещаемом изображение менялось на другое изображение любым способом?

Теперь я помещаю изображение под фоном, потому что, когда я помещаю изображение, слово опускается, я хочу, чтобы слово перекрывало изображение, но не могу…

если можете, пожалуйста, объясните, почему нужно так стилизовать … я просто учусь использовать html, поэтому хочу больше узнать об этом, спасибо

 <div class="navBar" style="margin-left:80px;padding-top:40px;"><!--navBar-->
  <div id="navbar" >
    <div id="navhome" style="width:100px;height:60px; padding-top:30px; padding-left:10px"> <a href="index.html">HOME</a> </div>
  </div>
  <div id="navbar">
    <div id="navhistory" style="width:130px;height:60px; padding-top:30px; padding-left:10px;"> <a href="about.html">ABOUT US</a> </div>
  </div>
  <div id="navbar">
    <div id="navevent" style="width:130px;height:60px; padding-top:30px; padding-left:10px"> <a href="event_1.html">EVENT</a> </div>
  </div>
  <div id="navbar">
    <div id="navcontact" style="width:130px;height:60px; padding-top:30px;"> <a href="contact.html">CONTACT US</a> </div>
  </div>
</div>
<!--navBar-->

css:

  .navBar {
    font-family: KaiTi;
    font-size: 22px;
    color: #6c2e13;
    text-align: center;
    float: left;
}

#navbar {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}

#navhistory {
    background-image: url(../img/nav2.png);
    background-repeat: no-repeat;
}

#navevent {
    background-image: url(../img/nav3.png);
    background-repeat: no-repeat;
}

#navcontact {
    background-image: url(../img/nav4.png);
    background-repeat: no-repeat;
}

#navhome {
    background-image: url(../img/nav1.png);
    background-repeat: no-repeat;
}

Комментарии:

1. В любом случае, не стилизуйте элементы непосредственно в html , когда вы используете внешний css файл — и это хорошо. Не должно быть больше элементов с одинаковым id значением, поскольку is = identifier — он должен быть уникальным.

2. Если вы хотите иметь больше элементов с тем же стилем, используйте class вместо этого.

Ответ №1:

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

Итак, проверьте мою скрипку, я изменил ваш код и применил то же самое при наведении курсора, посещении и активных действиях.

Некоторый пример кода:

  #navhistory a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/linear3.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

#navevent a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/radial1.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

#navcontact a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/linear1.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

#navhome a{
background-image: url(http://www.w3.org/TR/2011/WD-css3-images-20110217/radial3.png);
background-repeat: no-repeat;
padding:0px 50px;
display:inline-block;
height:60px;
line-height:60px;
white-space:nowrap;
}

ДЕМОНСТРАЦИЯ СКРИПКИ

Ответ №2:

Если вы хотите эффект наведения, используйте :hover psaudo-class для этого элемента и просто измените фоновое изображение. JSFiddle

 .button {
   background: url(../img/nav1.png) no-repeat;
}

.button:hover{
   background: url(../img/nav1_hover.png) no-repeat;
}

Обратите ВНИМАНИЕ: не стилизуйте элементы напрямую (напрямую записывая в style атрибут. Поскольку у вас есть повторяющиеся элементы, используйте class='someClass subclass sub-subclass' , а не просто применяйте стиль в .css файле ко всем элементам с этим классом:

 .someClass {
     width: 10px;
     height: 20.5%;
     padding: 0;
     margin: .5em;
}

.someClass.even {
     color: red;
}

.someClass.odd {
     color: green;
}
Метки: , , , ,