Как выбрать несколько элементов при наведении

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 Да, я понял, но я пытаюсь сделать это с Html и Css Lol и Плюс, я действительно не знаю Javascript, поэтому я пытаюсь держаться подальше от него
Показать ещё 3 комментария
Теги:

2 ответа

1

Тони,

Тот же ответ на другой пост, который у вас был несколько дней назад по этому вопросу, остается тем же (как сделать множественный наведение в списке). Это похоже на один чистый ответ 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"); 
    });
});

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

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

Поделиться
  • 0
    Да, я получил то, что хотел На этом jsfiddle.net/Xandour/abwu8 и когда я попытался написать все это в одном php-файле, по какой-то причине он не работал так же, как в jsfiddle?
  • 0
    Не могли бы вы опубликовать весь код PHP? Мы могли бы помочь определить, что не работает правильно, если увидим это.
Показать ещё 4 комментария
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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню