我对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/
您可以将鼠标悬停在“谷歌”上，右下角的框中会出现一幅图像。类似地，如果将鼠标悬停在“yahoo”上方，则右下角的框中会出现不同的图像。
然而，现在，我想创建一个复选框，当选中该复选框时，“谷歌”和“雅虎”的列表将显示在“内部框”的外面，并填充显示“列表移动到此处”的区域。我希望这可以通过一些功能实现，例如：
<input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all人们应该仍然能够将鼠标悬停在“谷歌”和“雅虎”上，使图像显示在右下角，因为某种原因，我一直在思考如何正确移动列表。我不确定这是否能更好地与html、java或css配合使用，因此任何形式的帮助都将不胜感激。
1条答案
按热度按时间c2e8gylq1#
如果我理解正确，这应该可以做到：