Блог

Главная - Вопросы по программированию - Как мне изменить текст div при наведении курсора мыши на кнопку?

Как мне изменить текст div при наведении курсора мыши на кнопку?

#javascript #html #css #hover

#javascript #HTML #css #наведите

Вопрос:

Что у меня есть:

8 пронумерованных полей в ряд. Мне не разрешено использовать jQuery.

Что я хочу сделать:

Когда пользователь наводит указатель мыши на нумерованное поле, текст динамически изменяется внутри элемента div в зависимости от того, на какое поле наведен указатель мыши.

Пример:

Если пользователь наводит курсор мыши на поле 1, текст внутри элемента div говорит «Привет»

Если пользователь наводит курсор на поле 2, текст внутри элемента div (такой же, как и раньше) говорит «Мир»

Редактировать: самое близкое, что у меня есть, это изменение текста, если пользователь нажимает на кнопку: http://jsfiddle.net/pVN2a /

 <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
  <style type="text/css">
    #button1 {
      background-color:red;
      display:inline-block;
    }
    #button2 {
      background-color:green;
      display:inline-block;
    }
  </style>
</head>
<body>
  <div id="button1">
    Click 1
  </div>
  <div id="button2">
    Click 2
  </div>
  <div id="textResults">
    Click on a button to change text
  </div>

  <script>
    // when #button1 is clicked...
    document.getElementById("button1").addEventListener("click", function(e) {
      // change text of #textResults
      document.getElementById("textResults").innerHTML ="Hello World";
    });

    // when #button2 is clicked...
    document.getElementById("button2").addEventListener("click", function(e) {
      // change text of #textResults
      document.getElementById("textResults").innerHTML ="Just Clicked #button2";
    });

  </script>
</body>
</html>

Должен ли я использовать .onMouseEvent в сочетании с каким-то прослушивателем событий? Извините, я совершенно новичок в этом. 🙁

Комментарии:

1. Можете ли вы опубликовать фрагмент своего кода? Это значительно упростит задачу.

2. Вы хотите, чтобы мы закодировали его для вас?

3. Напишите обработчики для mouseenter mouseleave событий и .

4. У меня буквально ничего нет — я не знаю, как это сделать. Самое близкое, что у меня есть, это, и текст изменяется щелчками мыши: jsfiddle.net/#amp;togetherjs=G1QBANLGOP

5. почему вам не разрешено использовать javascript? вы либо работаете над чем-то вроде ‘ft.com «кто уклоняется от использования «божественных объектов» в экосистеме компонентов, или это школьный проект. Школьный проект — это мое предположение. Перефразируйте свой вопрос, возможно, на «как мне изменить текст div при наведении курсора мыши на кнопку», а затем используйте этот ответ для создания полного решения вашей проблемы.

Ответ №1:

Отредактировано в соответствии с запросом OP на изменение содержимого отдельного поля на основе наведения курсора на другие поля. Используя общий комбинатор родственных элементов, мы можем выбрать div с результатами класса при наведении курсора мыши.

Демонстрация JSFiddle

HTML

 <div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>

    <div class="results"></div>
</div>

CSS

 .box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }

.results {
    width: 250px;
    height: 100px;
    background: #ccc;
    margin-top: 4px;
}

.box1:hover ~ div.results:before {
    cursor: pointer;
    content: "Hello";
}

.box2:hover ~ div.results:before {
    cursor: pointer;
    content: "World";
}

Использование общего комбинатора родственных элементов.

Комментарии:

1. Я думаю, он хочет, чтобы все они помещали сообщение в один и тот же DIV, а не в DIV, на который вы наводите курсор.

2. @Barmar я не согласен: «Если пользователь наводит курсор на box1 «, ОН» говорит привет и т. Д. …»

3. Как насчет «изменения текста внутри элемента div в зависимости от того, над каким полем наведен указатель мыши»? «ЭТО» относится к «элементу div», а не к зависшему окну.

4. Извините, я уточнил для вас, ребята — текст внутри одного и того же div динамически изменяется в зависимости от того, над каким полем наведен указатель мыши. Это помогает?

5. Использование content не предназначено для фактического содержимого , его следует использовать только для оформления и в сочетании с псевдоэлементами.

Ответ №2:

Как насчет использования onmouseover , это не jQuery.