i created button using div tag. not button button. here want change content of h3 tag '>' symbol when mouse hover on it. how it?
i write code in javascript change h3 contents not show effect? don't know why?
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>
you can using pure css, no js required, adding attributes button containing text want both normal , hover states, , setting content of :after pseudo show depending on :hover.
this maintains clear separation of concerns, keeping content within html , outside of js, meaning should wish change value being displayed, can reference source markup directly.
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>concerning why code isnt working, has been answered in thread, namely, function name contains invalid - character.
