我需要什么 JS 代码和 CSS 才能在用户“鼠标悬停”菜单时更改图像？

Question

我该如何正确执行以下操作：

当用户“将鼠标悬停在”Mars 上时，页面应如下所示。
当用户“将鼠标悬停在”Venus 上时，页面应如下所示。

所以我不知道该怎么做，所以我希望有人帮助我，我的布局都很好，我只是不知道下一步该怎么做。

图像文件名为：

Mars.jpg
Venus.jpg
Lightgraytile.jpg
grayWall.jpg

Page eg.

<script>
function init()
{
    document.getElementById('one').onmouseover = function()
    {
  
 }
}
 
window.onload=init;
</script>

<style>
    body {
        font: 1.2em Verdana, sans-serif;
        background-image: url(lightGrayTile.jpg);
    }
    #header {
        text-align: center;
        border-bottom: 1px solid black;
        margin-bottom: 1em;
    }
    #header h1 {
        margin: 0;
    }
    h3 {
        text-align: center;
        color: white;
        padding: 1em 0px;
        margin: 0px;
        background-image: url(grayWall.jpg);
    }

    #menu{
        float: left;
        width: 8em;
    }
    #menu ul {
        list-style-type: none;
        margin-left: 0;
        padding-left:0;
    }
    #menu li {
         background-color: black;
         border: 2px solid white;
    }
    #menu li:last-child {
        border-top: none;
    }
    #menu a {
        text-decoration: none;
        padding: 5px;
        color: white;
        display: block;
        text-align: center;
    }

    #content {
        margin-left: 8em;
        padding: 5px;
        width: 60%;
        border: 1px dashed black;
    }

</style>

<body>
<div id="header">
    <h1>Closest Planets</h1>
</div>

<div id="menu">

    <ul>
        <li id="one"><a href="#"> Mars </a></li>
        <li id="two"><a href="#"> Venus </a></li>
    </ul>
</div>

<div id="content">
    <h3 id="planetName"> Planet </h3>
    <img id="planetPic" src="Venus.jpg" alt="Venus"  />
</div>

</body>

Answer 1

从下一行复制粘贴

<style>
        h1,h4 {color: seagreen}
        table {font-family: Arial, Helvetica, sans-serif; border-collapse: collapse;width: 67%;}
        td {border: 2px solid black; text-align: left;font-family: Arial, Helvetica, sans-serif; padding: 1ex}
        th {border: 3px solid black; text-align: center; font-family: Arial, Helvetica, sans-serif;padding: 1ex}
    /*    spacing for you images*/
        img {margin: 10px 5px;}
    </style>
    <div align="center">
        <h1>The Eight Planets</h1>
    <!--    I hope you like this joke here, click to see-->
        <h4 onmouseover="myPlanet("unknown");"> Click on any planet below to learn!</h4>
        <!-- mercury -->
        <img onmouseover="myPlanet('mercury');"
             src="https://img.purch.com/w/660/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMy8wOTcvb3JpZ2luYWwvaWcyOTVfcGxhbmV0c19NZXJjdXJ5XzAyLmpwZw=="
             width="100" height="100">
        <!-- venus -->
        <img onmouseover="myPlanet('venus');"
             src="https://s-media-cache-ak0.pinimg.com/originals/98/09/66/9809666c323d35c266117428dd495791.jpg"
             width="100" height="100">
        <!-- earth -->
        <img onmouseover="myPlanet('earth');"
             src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2014/1-earth.jpg"
             width="100" height="100">
        <!-- mars -->
        <img onmouseover="myPlanet('mars');"
             src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg"
             width="100" height="100">
        <!-- jupiter -->
        <img onmouseover="myPlanet('jupiter');"
             src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg/330px-Jupiter_and_its_shrunken_Great_Red_Spot.jpg"
             width="100" height="100">
        <!-- saturn -->
        <img onmouseover="myPlanet('saturn');"
             src="https://media.istockphoto.com/vectors/planet-saturn-vector-vector-id165060389?k=6&m=165060389&s=612x612&w=0&h=wfA9UIF6EaoGannx6fiE1gSe3G1ixtpGEfvXH2Eqhrg="
             width="100" height="100">
        <!-- uranus -->
        <img onmouseover="myPlanet('uranus');" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg"
             width="100" height="100">
        <!-- neptune -->
        <img onmouseover="myPlanet('neptune');"
             src="https://img.purch.com/h/1000/aHR0cDovL3d3dy5zcGFjZS5jb20vaW1hZ2VzL2kvMDAwLzAwMC8xMjIvb3JpZ2luYWwvMDcwOTE4X25lcHR1bmVfMDIuanBn"
             width="100" height="100">
        <table id="planetInfo">
        </table>
    </div>

    <script>
    //    for starters this will do, practice more and you will get better
        function myPlanet(planet) {
            var info = "";
            var planetInfo = document.getElementById("planetInfo");
            switch (planet) {
                case "mercury":
                    info += "<tr><th> MERCURY PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "venus":
                    info += "<tr><th> VENUS PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "earth":
                    info += "<tr><th> EARTH PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "mars":
                    info += "<tr><th> MARS PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "jupiter":
                    info += "<tr><th> JUPITER PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "saturn":
                    info += "<tr><th> SATURN PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "uranus":
                    info += "<tr><th> URANUS PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                case "neptune":
                    info += "<tr><th> NEPTUNE PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
                    break;
                default:
                    info += "<tr><th> WAKANDA PLANET PROFILE</th><th>QUICK FACTS</th></tr>";
                    info += "<tr><td> Moons: 0 </td><td> Your weight on Mercury would be 38% of your weight on Earth </td></tr>";
                    info += "<tr><td> Diameter: 4,879km </td><td> A day on the surface of Mercury lasts 176 Earth days </td></tr>";
                    info += "<tr><td> Orbit period: 88 days </td><td> Mercury has more craters and impact marks that any other planet </td></tr>";
                    info += "<tr><td> Surface temperature: -173 to 427°C </td><td> After the Earth, Mercury is the second densest planet </td></tr>";
                    info += "<tr><td> First record: 14th century BC </td><td> The orbit of Mercury is an ellipse rather than circular </td></tr>";
            }
            planetInfo.innerHTML = info;

        }



    </script>

Answer 2

你可以这样使用：

function init()
                {
                    document.getElementById('one').onmouseover = function()
                    {
                        document.getElementById('planetName').innerText = "One";
                        document.getElementById('planetPic').src = "2.jpg";
                    }
                    document.getElementById('two').onmouseover = function()
                    {
                        document.getElementById('planetName').innerHTML = "Two";
                        document.getElementById('planetPic').src = "1.jpg";
                    }
                }

                window.onload=init;

这两个功能可以通过一些变量的使用和一点思考来实现。

我需要什么 JS 代码和 CSS 才能在用户“鼠标悬停”菜单时更改图像？

What JS code and CSS do I need so that the image changes when the user “mouses-over” the menu?

html

javascript

css

webpage