2013-09-30 2 views
0

мне было интересно, как я могу создать мульти парить на парении, например, как я могу сделать #b цвета изменения, когда #a завис? только с использованием html и css. кстати #a это окно или изображениеКак выбрать несколько элементов на парении

вот HTML:

<div id="showwrap"> 
    <div id="leftbox"> 
     <ul> 
      <li id="a"> <a href=""></a></li> 
     </ul> 
    </div> 
    <div id="rightbox"> 
     <ul> 
      <li id="b"> <a href="">Firstname Lastname</a></li> 
     </ul> 
    </div> 
</div> 
+2

Было бы легко сделать с помощью JavaScript, но я не думаю, что вы можете сделать это только с помощью CSS. –

+0

@BarbaraLaird Да я Фигурные Но Im Попытка сделать это с Html И Css Лол и плюс я не знаю, Javascript Так им пытаются держаться подальше от него –

+0

http://jsfiddle.net/bhlaird/XBfPY/ - быстрый Javascript пример –

ответ

1

Тони,

Тот же ответ на другой пост у вас несколько дней назад по этому вопросу остается прежней (How To Do Multiple Hover On List). Это похоже на один чистый ответ CSS, но параметры jQuery намного проще.

Есть ли причина того, что вы не готовы/могут использовать JQuery или JavaScript? Такая ситуация является одной из причин использования JavaScript. Я буду следить за этим, чтобы услышать, есть ли у кого-то чистый способ CSS/HTML. Тем временем вы можете выполнить это с помощью jQuery или JavaScript следующим образом:

1.) Создайте класс CSS, который обладает свойствами, которые вы хотите при наведении на #a.

2.) Включить следующий JQuery код в соответствующем файле JavaScript (или глава HTML документа).

$(function() { 
    $("#a").hover(function() { 
     $(this).addClass("hoverClass"); 
     $("#b").addClass("hoverClass"); 
    }); 
}); 

Функция парения в JQuery решает обе функции MouseEnter и MouseOut в одном шаге. Пока мышь нависает над указанным элементом, выполняются условия внутри функции. Когда мышь покидает элемент, условия автоматически удаляются. Presto!

ПРИМЕЧАНИЕ. Хотя я не рекомендую использовать встроенный JavaScript, это может быть выполнено в файле HTML, если ваша причина не использовать jQuery из-за отсутствия возможности иметь внешний файл JavaScript. Просто включите фрагмент, указанный в моей второй точке заголовка между тегами сценария JavaScript.

+0

Да ну, я получил то, что хотел на этом http://jsfiddle.net/Xandour/abwu8/ и когда я попытался кодируя все это в одном файле php, по какой-то причине он не работал, как в jsfiddle? –

+0

Не могли бы вы опубликовать весь PHP-код? Мы могли бы помочь определить, что работает неправильно, если мы это увидим. –

+0

no no well Я попытался поместить весь код в один файл html, но когда я добавил весь код скрипта js в файл .html, он по какой-то причине не работал, как когда код был сгенерирован в jsfiddle –

0

Я могу вспомнить это поведение или подобное с помощью меток (если вы не хотите javascript), но это НЕ будет работать со всеми браузерами, и самое главное, вы будете использовать HTML для создания поведенческих материалов и не значит, как и должно быть.

скрипку: http://jsfiddle.net/hLtSG/

CSS

#b:hover, #bc:hover{ 
    color: red; 
    font-weight: bold; 
    border: solid 1px black; 
} 

HTML

<div id="showwrap"> 
    <div id="leftbox"><label for="b"><img src="YOUR_IMAGE" /></label> 
    </div> 
    <div id="rightbox"> 
     <ul> 
      <li> <input id="b" name="b" value="Firstname Lastname" /></li> 
      <li> <a id="bc" name="bc">Firstname Lastname</a></li> 
     </ul> 
    </div> 
</div> 
Смежные вопросы