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

У меня есть текст на странице, когда кто-то наводит на него курсор, он выделяет (используя контур) несколько выбранных изображений на одной странице. Я хочу, чтобы это было одним из способов, поэтому наведение мыши на текст выделяет изображения, но я хочу, чтобы наведение курсора на изображения не имело никакого эффекта, прямо сейчас оно также выделяет все. Это возможно? Примечание. Каждое изображение имеет идентификатор и класс (jquery draggable), уже прикрепленный к нему.

HTML:

<div class="container">
    <div class="containerLeft">alignments</div>
    <div><img src="http://www.cool-smileys.com/images/out11.jpg" id="position7" class="ui-widget-content" /></div>
    <div><img src="http://www.cool-smileys.com/images/out12.jpg" id="position8" class="ui-widget-content" /></div>
    <div><img src="http://www.cool-smileys.com/images/out13.jpg" id="position9" class="ui-widget-content" /></div>
    <div> <img src="http://www.cool-smileys.com/images/out14.jpg" id="position12" class="ui-widget-content" /> </div>
</div>

CSS:

/* Normal Styles */
.containerLeft {
    color:#333;
    width:100px;
}

.containerLeft:hover {
    width:100px;
}


/* Hover Styles */
.container:hover .containerLeft {
    background-color: none;
}


.container:hover #position12 {
    outline:2px solid #CFF;
}

.container:hover #position7 {
    outline:2px solid #CFF;
}

.container:hover #position8 {
    outline:2px solid #CFF;     
}

.container:hover #position9 {
    outline:2px solid #CFF;
}


  #position7{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 13em;
    top:9em;
    z-index:17;
 }

   #position8{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 4em;
    top:15em;
    z-index:2;
 }


    #position9{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 7em;
    top:5em;
    z-index:20;
 }

 #position12{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 24em;
    top:10em;
    z-index:-14;
 }

Сейчас все в css, но может есть решение на javascript?

jsfiddle: http://jsfiddle.net/tMzMN/8/


css hover mouseover outline
person user2617190    schedule 21.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите использовать JS/Jquery, вы можете добиться того, чего хотите, следующим образом:

$(".containerLeft").hover(function() {
    $(".ui-widget-content").addClass("hover_class");
}, function() {
    $(".ui-widget-content").removeClass("hover_class")
});

Затем просто замените все 4 ваших селектора CSS, которые выглядят следующим образом:

.container:hover #position9 {
    outline:2px solid #CFF;
}
...

с этим:

.hover_class {
    outline:2px solid #CFF;
}

Вот скрипт в действии: http://jsfiddle.net/tMzMN/9/

Кроме того, и не цитируйте меня по этому поводу, использование описанного выше метода Jquery, вероятно, будет иметь более высокий уровень обратной совместимости со старыми браузерами, в отличие от любых приемов CSS, которые вы найдете. Я могу ошибаться, и вполне может быть что-то, что хорошо работает с IE‹9, но я не уверен...

person Dryden Long    schedule 21.08.2013