CSS Hover, чтобы изменить другие элементы - PullRequest
Новая
       30

CSS Hover, чтобы изменить другие элементы

0 голосов
/ 02 октября 2011

У меня есть эта панель навигации, которую я сделал в CSS, мне бы хотелось, чтобы при наведении курсора на один из 3 значков навигации он менял положение фона основного изображения.

Я пробовал несколько способов, но не смог заставить их работать должным образом.

CSS 

    /* Nav Button 1 */

.nav1 {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
}

#nav1
{
  display: block;
  width: 92px;
  height: 107px;
  background: url("images/triangle.png") no-repeat 0 0;

}

#nav1:hover
{ 
  background-position: 0 -107px;
}


/* Nav Button 2 */

.nav2 {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
    padding-right: 0px;
}

#nav2
{
  display: block;
  width: 92px;
  height: 107px;
  background: url("images/triangle.png") no-repeat 0 0;

}

#nav2:hover
{ 
  background-position: 0 -107px;
}

/* Nav Button 3 */

.nav3 {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
    padding-right: 0px;
}

#nav3
{
  display: block;
  width: 92px;
  height: 107px;
  background: url("images/triangle.png") no-repeat 0 0;

}

#nav3:hover
{ 
  background-position: 0 -107px;
}

/* Nav Name */

.navname {
    float:left;
    padding-top:20px;
    border:none;
    outline:none;
    padding-right: 0px;
}

#navname
{
  display: block;
  width: 228px;
  height: 81px;
  background: url("images/blank.png") no-repeat 0 0;

}

HTML 

<div id="navigation">
    <div class="nav1">
    <a id="nav1" href="#"></a>
    </div>
    <div class="nav2">
    <a id="nav2" href="#"></a>
    </div>
    <div class="nav3">
    <a id="nav3" href="#"></a>
    </div>
    <div class="navname"><a id="navname" href="#"></a>
    </div>
</div>

Есть идеи, как это можно сделать? Элемент navname - это фоновая позиция, которую я хочу изменить при наведении курсора на nav1, nav2, nav3.

Спасибо: D

Ответы [ 2 ]

2 голосов
/ 02 октября 2011

Это довольно просто с помощью jQuery: 

$('element-to-initiate-change').hover(function(){
    //this will happen when your mouse moves over the object
    $('element-to-change').css({
        "property":"value",
        "property":"value",
    });
},function(){
    //this is what will happen when you take your mouse off the object
    $('element-to-change').css({
        "property":"value",
        "property":"value",
    });
});

Вот пример: http://jsfiddle.net/dLbDF/258/

Если бы вы сделали jsfiddle, используя ваш код, я бы сделал это с вашим кодом, чтобы вы могли видеть более понятным. При задании вопроса всегда используйте jsfiddle или другой пример.

0 голосов
/ 08 апреля 2015

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

https://jsfiddle.net/Hastig/ancwqda3/

html 

<div id="navigation">
    <a class="nav n1" href="#"></a>
    <a class="nav n2" href="#"></a>
    <a class="nav n3" href="#"></a>

    <a class="title t0" href="#"></a>
    <a class="title t1" href="#">one</a>
    <a class="title t2" href="#">two</a>
    <a class="title t3" href="#">three</a>
</div>

css 

.nav {
    display: inline-block;
    float: left;
    padding-top: 0px;
    width: 92px;
    height: 107px;
    background: url("http://dl.dropbox.com/u/693779/triangle.png") no-repeat 0 0;
}

.nav:hover { 
  background-position: 0 -107px;
}

.title {
    width: 228px;
    height: 107px;
    background: url("http://dl.dropbox.com/u/693779/blank.png") no-repeat 0 0;
    color: red;    font-weight: bold;
    text-decoration: none;
    font-size: 40px;    line-height: 107px;
    text-align: center;
}

.t0 {
    display: inline-block;
}

.t1, .t2, .t3 {
    display: none;
}

.nav:hover ~ .t0 {
    display: none;
}

.n1:hover ~ .t1, .n2:hover ~ .t2, .n3:hover ~ .t3 {
    display: inline-block;
}
...