нежелательный побочный эффект при наведении курсора мыши

Я хотел, чтобы мой текст изменился при наведении курсора мыши. Я нашел рабочее решение в stackoverflow, которое можно найти здесь. Кредиты выходят на Марка для этого решения.

Однако в моей ситуации у меня есть целый раздел ссылок, где я хотел бы реализовать это решение, но столкнулся с нежелательным побочным эффектом. Когда я навожу курсор на текст, который хочу заменить в событии наведения курсора мыши, это влияет на все ссылки одновременно, а не только на ту, над которой я нахожусь. Я хочу, чтобы эффект наведения мыши работал ТОЛЬКО на той ссылке, на которую я наводил указатель мыши. К сожалению, все ссылки находятся внутри одного и того же ul li, поэтому я не уверен, что решением будет открывать и закрывать <div> между каждым <li> </li> снова и снова.

Ниже приведен фрагмент CSS, который я использовал из Mark.

div#line1 span#a {
    display:inline;
}
div#line1:hover span#a {
    display:none;
}
div#line1 span#b {
    display:none;
}
div#line1:hover span#b {
    display:inline;
}

и часть в моем html:

      <div id="line1">
         <ul>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
          </ul>


html css mouseover
person Instronics    schedule 24.07.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Прежде всего, в промежутках у вас есть общие идентификаторы, поэтому измените id на class там и в CSS вместо использования # используйте маркер класса .

Кроме того, вы применяете наведение к идентификатору line, поэтому все div затронуты. :hover следует применять только к элементу "a", "b" или "li", где требуется эффект.

Попробуйте этот CSS, просто заменив идентификатор HTML для класса внутри промежутков:

li span.a{
  display: inline;
}

li span.b{
  display: none;
}

li:hover span.a{
 display: none;
}

li:hover span.b{
 display: inline;
}

ДЕМО: http://jsfiddle.net/Kn7YY/1/

person Nuxy    schedule 24.07.2012
comment
Конечно, это повлияет на все спаны одновременно и не будет относиться к ним как к отдельным? - person Billy Moat; 24.07.2012
comment
@Billy Moat: Вот и демоверсия. - person Nuxy; 24.07.2012
comment
Мне нравится это решение. Большое спасибо за ваше понимание здесь. Думаю, сегодня я получил ценный урок об id и class. Я буду использовать это решение для своей проблемы. Спасибо. - person Instronics; 24.07.2012

arrow_upward
1
arrow_downward

Как насчет этого решения?

Некоторые изменения в разметке:

HTML:

<div>
    <ul>
        <li id="line1"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line2"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line3"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line4"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line5"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
    </ul> 
</div>

CSS:

#line1 span.a, 
#line2 span.a,
#line3 span.a
#line4 span.a
#line5 span.a {
    display:inline;
}

#line1:hover span.a,
#line2:hover span.a,
#line3:hover span.a,
#line4:hover span.a,
#line5:hover span.a {
    display:none;
}

#line1 span.b,
#line2 span.b, 
#line3 span.b, 
#line4 span.b, 
#line5 span.b {
    display:none;
}

#line1:hover span.b,
#line2:hover span.b,
#line3:hover span.b,
#line4:hover span.b,
#line5:hover span.b {
    display:inline;
}​
person Ahsan Khurshid    schedule 24.07.2012
comment
@Billy Moat: :p без проблем, в следующий раз. - person Ahsan Khurshid; 24.07.2012
comment
Слишком много удостоверений личности, на самом деле не нужно. - person Nuxy; 24.07.2012
comment
@Nuxy: это чистое решение CSS. Используя javascript/jQuery, вы можете избежать этого. Если у вас есть лучше, пожалуйста, поделитесь для нас знаниями. - person Ahsan Khurshid; 24.07.2012
comment
@A.K: Посмотрите на мой ответ, он дает тот же результат, но без использования нескольких идентификаторов. Достаточно просто использовать селектор элемента li. Нет необходимости использовать идентификатор для каждого из них. - person Nuxy; 24.07.2012
comment
@Nuxy - тогда я, должно быть, что-то пропустил. Пожалуйста, предоставьте скрипт, показывающий способ сделать это, используя только CSS без нескольких идентификаторов. - person Billy Moat; 24.07.2012
comment
@Billy Moat: ^^ событие наведения влияет только на элемент, который вы наводите, поэтому оно не повлияло на все элементы div. - person Nuxy; 24.07.2012
comment
@Nuxy - Да, я думал, что это повлияет на все элементы LI! Виноват! - person Billy Moat; 24.07.2012
comment
Хотя это решение также сработало для меня, я предпочел решение с более коротким кодом CSS. Хотя и вам спасибо за помощь. - person Instronics; 24.07.2012