не работает mouseover

124

23 января 2021, 16:50

// А так должен работать mouseover ? 
var button = document.querySelector('button'); 
button.onmouseover = function(){ 
  button.innerHTML = 'hello' 
};

<button class="btn">213</button>

var button = document.querySelector('button'); 
button.onmouseover = function(){ 
   var d  = 'text'; 
   return d; 
};

<button class="btn">213</button>

Как сделать чтобы рядом с button появлялся текст ?

Answer 1

Быть может, так...

.hint {display: none} 
.btn:hover + .hint {display: inline;}

<button class="btn">213</button><span class="hint"> text</span>

или так?)

.btn {position: relative;} 
 
.btn:before { 
  content: attr(data-hint); 
  display: none; 
  position: absolute; 
  top: -35px;  
  border: 2px solid orange; 
  background-color: white; 
  padding: 3px 10px; 
  min-width: 120px; 
} 
 
.btn:hover:before { display: inline-block; }

<br><br><br> 
 
<button class="btn" data-hint="Бубу 213">213</button> 
<button class="btn" data-hint="Бубу 55555">55555</button>

А цитируя ваш код:

var button = document.querySelector('button');

button.onmouseover = function(){
   var d  = 'text';
   return d;
};
// Это то же самое, что написать 
button.onmouseover = 'text';
// т.е. не имеет смысла

Если хотелось сделать подсказку, которая при наведении будет всплывать и держаться рядом с мышкой и двигаться с ней, ссылаюсь сюда, на второй пример → Как вывести блок по клику рядом с курсором?

Answer 2

let btn = document.getElementsByClassName('btn')[0]; 
 
let state = false; 
 
btn.addEventListener('mouseenter', function(e) { 
  if (state) return; 
  let newElem = document.createElement('div'); 
  newElem.className = 'tx'; 
  newElem.innerHTML = 'hello'; 
  document.body.appendChild(newElem); 
  state = true; 
  return; 
});

.btn { 
  border: 1px solid #000; 
  padding: 20px; 
  background: red; 
  color: #000; 
  text-transform: uppercase; 
  cursor: pointer; 
  display: inline-block; 
} 
 
.tx { 
  display: inline-block; 
  border: 1px solid #000; 
  background: #512; 
  padding: 20px; 
  color: #fff; 
}

<span class="btn">Hover me!</span>

Answer 3

var button = document.querySelector('button') 
 
button.addEventListener('mouseover', function () { 
  button.insertAdjacentText('afterend', "hello") 
})

<button class="btn">213</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Текст с большой буквы после точки [дубликат]

Как решить такую задачу

112

javascript

Как использовать чужой открытый WebSocket?

Есть одна JavaScript игра, с обфусцированным кодом, которая создаёт WebSocket соединениеМне бы хотелось как-то слать данные через это WebSocket соединение,...

117

javascript

запретить отправку больше 1 сообщения обратной формы

это код формы далее обработчик

124

$Как решить C:\fakepath$

javascript

Как решить C:\fakepath

Как отправить txt (или любой другой) файл на сервер указывая правильный путь?

132