H3 содержание тега не изменяется при наведении указателя мыши

Я создал кнопку, используя тег div. На самом деле это не кнопка, но она выглядит как кнопка. Здесь я хочу изменить содержимое тега h3 на «>» этот символ, когда мышь наводится на него. Как это сделать?H3 содержание тега не изменяется при наведении указателя мыши

Я пишу код в javascript для изменения содержимого h3, но он не будет показывать никакого эффекта? Я не знаю почему?

function change-content() { 
 
    document.getElementById('button-name').innerHTML = ">"; 
 
}

body { 
 
    background-color: #6badf6; 
 
} 
 
#button-layout { 
 
    background-color: #3b81cf; 
 
    width: 100px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin-left: 50%; 
 
    margin-top: 25%; 
 
} 
 
#button-name { 
 
    font-family: verdana; 
 
    font-size: 14px; 
 
    color: white; 
 
    padding-left: 22px; 
 
    padding-top: 11px; 
 
} 
 
#button-name:hover { 
 
    cursor: pointer; 
 
}

<html> 
 

 
<body> 
 
    <div id="button-layout"> 
 
    <h3 id="button-name" onmouseover="change-content()">Submit</h3> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-04-28 Code Helper

Вы действительно можете сделать это, используя чистый CSS, не требуется никаких JS, добавляя атрибуты к кнопке, содержащий текст, который вы хотите как для нормальной и парить состояния, а затем установить содержание из :after pseudo, чтобы показать это в зависимости от :hover.

Это также поддерживает четкое разделение проблем, сохраняя содержимое в пределах вашего HTML и вне вашего JS, что означает, что вы хотите изменить отображаемое значение, вы можете просто напрямую ссылаться на разметку источника.

body { 
 
    background-color: #6badf6; 
 
} 
 
#button-layout { 
 
    background-color: #3b81cf; 
 
    width: 100px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin-left: 50%; 
 
    margin-top: 25%; 
 
} 
 
#button-name { 
 
    font-family: verdana; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    color: white; 
 
    padding-top: 11px; 
 
} 
 
#button-name:hover { 
 
    cursor: pointer; 
 
} 
 
#button-name:after { 
 
    content: attr(data-label); 
 
} 
 
#button-name:hover:after { 
 
    content: attr(data-label-hover); 
 
}

<div id="button-layout"> 
 
    <h3 id="button-name" data-label="Submit" data-label-hover=">"></h3> 
 
</div>

о том, почему ваш код в настоящее время разве работает, это также answered in this thread, а именно, ваше имя функции содержит недопустимый - характер.

источник

2015-04-28 07:45:14 SW4

Проблема в объявлении функции. define function with (_) как функция change_content() будет работать

источник

2015-04-28 07:46:57

Ваше имя функции недействительно. Парсер видит это как вычитание.

<html> 
 

 
<head> 
 
    <style> 
 
    body { 
 
     background-color: #6badf6; 
 
    } 
 
    #button-layout { 
 
     background-color: #3b81cf; 
 
     width: 100px; 
 
     height: 40px; 
 
     border-radius: 10px; 
 
     margin-left: 50%; 
 
     margin-top: 25%; 
 
    } 
 
    #button-name { 
 
     font-family: verdana; 
 
     font-size: 14px; 
 
     color: white; 
 
     padding-left: 22px; 
 
     padding-top: 11px; 
 
    } 
 
    #button-name:hover { 
 
     cursor: pointer; 
 
    } 
 
    </style> 
 
    <script> 
 
    function changeContent() { 
 
     document.getElementById('button-name').innerHTML = ">"; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="button-layout"> 
 
    <h3 id="button-name" onmouseover="changeContent()">Submit</h3> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-04-28 07:47:02 DTing

изменить ваше имя функции см пример

changecontent()

источник

2015-04-28 07:53:10

H3 содержание тега не изменяется при наведении указателя мыши

ответ

Смежные вопросы