鼠标移入移出改变样式

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入/移除改变样式title>
    <style>
        body {
            text-align: center;
        }
        div {
            border: 10px solid black;
            width: 200px;
            height: 200px;
            background: black;
            display: inline-block;
            cursor: crosshair;
        }
        p {
            text-align: left;
            font-size: 15px;
            color: white;
            margin: 15px  15px ;
        }

    style>
    <script>
        window.onload = function() {
            var a=document.getElementById('m');
            var b=document.getElementById('n');
            a.onmouseover=function() {
                a.style.border="10px solid red";
                a.style.background='#cccccc';
                b.style.color='red';

            };
            a.onmouseout=function() {
                a.style.border="10px solid black";
                a.style.background='black';
                b.style.color='white';
            };

        }
    script>
head>
<body>
    <div id="m">
        <p id="n">鼠标移入改变样式,鼠标移出恢复。p>
    div>
body>
html>
效果图:
 
 

你可能感兴趣的:(javascript,HTML)