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

我是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/

你可以将鼠标悬停在"谷歌"上，右下角的框中就会出现一张图片。类似地，如果一个鼠标悬停在"雅虎"上，右下角的框中会出现不同的图像。

然而，现在，我想创建一个复选框，当选中时，"谷歌"one_answers"雅虎"的列表将出现在"内部框"之外，并填充它所说的"列表移动到此处"的区域。我希望这可以通过一些功能来实现，比如：

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

一个人应该仍然能够悬停在"谷歌"one_answers"雅虎"上，使图像显示在右下角。出于某种原因，我一直在思考如何正确移动列表。我不确定这是否能更好地与HTML、Java或CSS配合使用，所以任何形式的帮助都将不胜感激。

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

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>

相关内容

最新更新

热门标签：