HTML Java CSS 选中框后使列表显示在不同的 div

Question

我是 HTML、Java 和 CSS 的新手，一直致力于让悬停元素出现在网页的不同区域。我创建了这个 jfiddle，它显示了我到目前为止所拥有的：

startList = function() {
    var sfEls = document.getElementById("over").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            //first remove all existing classes of .over
            for (var j=0; j<sfEls.length; j++){
                sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\b"), "");
            }
                this.className+=" over";// now add class
        }
    }
}

// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
    
addLoadEvent(startList);

<head>
* {
    margin:0;
    padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
    display:block;
    border:none;
}
.outer {
    width:760px;
    margin:auto;
    border:1px solid #000;
    padding:10px 10px 20px;
    position:relative;/* stacking context*/
    overflow:auto;
}
.outer2{
    width:1000px;
    margin:auto;
    border:1px solid #000000;
    position:relative;
}
.image-holder {
    float:right;
    margin:86px 10px 10px 0;
    width:500px;
    height:400px;
    background:#fffccc;
    border:1px solid #000;
    padding:3px;
    position:relative;
    z-index:1;
    display:inline;
}
ul.links {
    list-style:none;
    margin:0 20px;
    padding:0;
    border:1px solid #000;
    border-bottom:none;
    width:100px;
}
.links li {
    width:100px;
    background:blue;
    color:#fff;
    border-bottom:1px solid #000;
}
.links li a {
    display:block;
    width:90px;
    padding:5px;
    background:blue;
    color:#fff;
    text-decoration:none;
}
.links li a span, .links li a b {
    position:absolute;
    right:24px;
    top:-999em;
    width:500px;
    height:400px;
    z-index:2;
}
.links li a span img {
    display:block;
    margin:0 0 5px
}
.links li a:hover, .links li.over a {
    background:teal;
    color:#000;
    visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
    top:200px;
    left:50px;
    height:auto;
}
h1 {
    text-align:center;
    margin:1em 0;
}
</style>
</head>

<div class="outer2">
        <b>list moves here</b>
    <div class="outer">
        <p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
        <ul id="all" class="links">
            <li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
        </ul>
        <ul id="over" class="links">
            <li><a href="https://google.com">Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></a></li>    
            <li><a href="https://www.yahoo.com">Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></a></li>
            
        </ul>       
    </div>
</div>

https://jsfiddle.net/qbrnuwe6/6/

可以将鼠标悬停在 'Google' 上，右下角的框中会出现一张图片。同样，如果将鼠标悬停在 'Yahoo' 上，右下角的框中会出现一张不同的图像。

但是，现在，我想创建一个复选框，在检查时，'Google'的列表和'Yahoo'将出现在'inner box'外部，并填充该区域的区域说 'list moves here'。我希望这可以通过一些功能来实现，例如：

<input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all

人们应该仍然可以将鼠标悬停在 'Google' 和 'Yahoo' 上以使图像出现在右下角。出于某种原因，我对如何正确移动列表感到困惑。我不确定使用 HTML、Java 或 CSS 是否会更好，因此我们将不胜感激。

Answer 1

如果我理解正确的话，应该这样做：

function toggle_show(type)
{
  const menu = document.getElementById("over");
  
  if (document.getElementById("list_all").checked)
  {
    document.querySelector("div.outer2").appendChild(menu);
  }
  else
  {
    document.querySelector("div.outer").appendChild(menu);
  }
}

startList = function() {
    var sfEls = document.getElementById("over").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            //first remove all existing classes of .over
            for (var j=0; j<sfEls.length; j++){
                sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\b"), "");
            }
                this.className+=" over";// now add class
        }
    }
}

// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
    
addLoadEvent(startList);

function toggle_show(type)
{
  const menu = document.getElementById("over");
  
  if (document.getElementById("list_all").checked)
  {
    document.querySelector("div.outer2").appendChild(menu);
  }
  else
  {
    document.querySelector("div.outer").appendChild(menu);
  }
}

<head>
* {
    margin:0;
    padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
    display:block;
    border:none;
}
.outer {
    width:760px;
    margin:auto;
    border:1px solid #000;
    padding:10px 10px 20px;
    position:relative;/* stacking context*/
    overflow:auto;
}
.outer2{
    width:1000px;
    margin:auto;
    border:1px solid #000000;
    position:relative;
}
.image-holder {
    float:right;
    margin:86px 10px 10px 0;
    width:500px;
    height:400px;
    background:#fffccc;
    border:1px solid #000;
    padding:3px;
    position:relative;
    z-index:1;
    display:inline;
}
ul.links {
    list-style:none;
    margin:0 20px;
    padding:0;
    border:1px solid #000;
    border-bottom:none;
    width:100px;
}
.links li {
    width:100px;
    background:blue;
    color:#fff;
    border-bottom:1px solid #000;
}
.links li a {
    display:block;
    width:90px;
    padding:5px;
    background:blue;
    color:#fff;
    text-decoration:none;
}
.links li a span, .links li a b {
    position:absolute;
    right:24px;
    top:-999em;
    width:500px;
    height:400px;
    z-index:2;
}
.links li a span img {
    display:block;
    margin:0 0 5px
}
.links li a:hover, .links li.over a {
    background:teal;
    color:#000;
    visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
    top:200px;
    left:50px;
    height:auto;
}
h1 {
    text-align:center;
    margin:1em 0;
}
</style>
</head>

<div class="outer2">
        <b>list moves here</b>
    <div class="outer">
        <p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
        <ul id="all" class="links">
            <li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
        </ul>
        <ul id="over" class="links">
            <li><a href="https://google.com">Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></a></li>    
            <li><a href="https://www.yahoo.com">Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></a></li>
            
        </ul>       
    </div>
</div>

HTML Java CSS 选中框后使列表显示在不同的 div

HTML Java CSS make list appear in different div after box checked

html

javascript

css

hover