我在这里遇到了一些情况，如果有人能帮助我就太好了。最近我为客户创建了一个包页面，并包含了一个 JS 悬停效果，这样我就可以使用 Bootstrap 中的不同列将鼠标悬停在所有元素上。现在这可能很简单，但我卡住的地方是列之间的短空间，我给出了一个示例图像..
JS:
var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el16","el17","el18","el19","el20","el21","el22", "el23", "el24","el25" ]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
var curN = n[classname];
for(var i = 0; i < curN; i ++) {
elms[classname][i].style.backgroundColor = color;
}
}
for(var k = 0; k < nclasses; k ++) {
var curClass = classes[k];
elms[curClass] = document.getElementsByClassName(curClass);
n[curClass] = elms[curClass].length;
var curN = n[curClass];
for(var i = 0; i < curN; i ++) {
elms[curClass][i].onmouseover = function() {
changeColor(this.className, "#dbdbdb");
};
elms[curClass][i].onmouseout = function() {
changeColor(this.className, "transparent");
};
}
};
HTML:
<div id="packagecontent" class="container-fluid" style="display: block;">
<div class="row">
<div class="clearfix"></div>
<div class="col-xs-4 col-md-4" id="pkg-main-col">
<div class="row pkg-inner">
<div class="header-image wp-image-404 size-full" style="visibility: hidden;"></div>
<div class="pkg-pricing">
<h5>PRICING</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el1">Monthly Pricing (Billed Annually)</li>
<li class="el2">Monthly Pricing (Billed Monthly)</li>
<li class="el3">Products</li>
<li class="el4">Competitors</li>
</ul>
</div>
<div class="pkg-competitor-comparison">
<h5>COMPETIROR COMPARISON</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el5">Products*</li>
<li class="el6">Prices*</li>
<li class="el7">Attributes*</li>
<li class="el8">Images*</li>
<li class="el9">Related Products*</li>
<li class="el10">Videos*</li>
</ul>
</div>
<div class="pkg-post-comparison-processing">
<h5>POST-COMPARISON PROCESSING</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el11">Attributes*</li>
<li class="el12">Images*</li>
<li class="el13">Related Videos*</li>
<li class="el14">Videos*</li>
<li class="el15">Reviews*</li>
<li class="el16">SEO Friendly product descriptions*</li>
</ul>
</div>
<div class="pkg-support">
<h5>SUPPORT</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el17">Full Knowledge base*</li>
<li class="el18">Launch guidance*</li>
<li class="el19" >Email Support*</li>
<li class="el20">Phone Support*</li>
</ul>
</div>
<div class="pkg-compatibility">
<h5>COMPATIBILITY</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el21">Support all e-commerce software*</li>
</ul>
</div>
<div class="pkg-reporting">
<h5>REPORTING</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el22">User Friendly Dashboard*</li>
<li class="el23">Import-Export Tool*</li>
<li class="el24">Easy to print reports*</li>
</ul>
</div>
<div class="pkg-access-security">
<h5>Security and access</h5>
<ul class="package-cat" style="text-align:left;">
<li class="el25">SSL Encription*</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2" id="pkg-col">
<div class="row pkg-inner">
<div class="header-image wp-image-404 size-full"> <p>FREE</p></div>
<div class="pkg-pricing col-data">
<ul class="package-cat">
<li class="el1">£ 0 / month</li>
<li class="el2">£ 0 / month</li>
<li class="el3">10</li>
<li class="el4">1</li>
</ul>
</div>
<div class="pkg-competitor-comparison col-data">
<ul class="package-cat">
<li class="el5"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el6"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el7"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el8"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el9"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el10"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-post-comparison-processing col-data">
<ul class="package-cat">
<li class="el11"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el12"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el13"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el14"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el15"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el16"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
</ul>
</div>
<div class="pkg-support col-data">
<ul class="package-cat">
<li class="el17"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el18"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el19">24/7</li>
<li class="el20"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
</ul>
</div>
<div class="pkg-compatibility col-data">
<ul class="package-cat">
<li class="el21"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-reporting col-data">
<ul class="package-cat">
<li class="el22"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el23"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el24"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-access-security col-data">
<ul class="package-cat">
<li class="el25"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2" id="pkg-col">
<div class="row pkg-inner">
<div class="header-image wp-image-404 size-full"><p>BASIC</p></div>
<div class="pkg-pricing col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el1">£ 25 / month</li>
<li class="el2">£ 29 / month</li>
<li class="el3">50</li>
<li class="el4">1</li>
</ul>
</div>
<div class="pkg-competitor-comparison col-data">
<ul class="package-cat " style="list-style-type: none;display:block;">
<li class="el5"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el6"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el7"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el8"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el9"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el10"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-post-comparison-processing col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el11"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el12"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el13"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el14"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el15"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el16"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
</ul>
</div>
<div class="pkg-support col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el17"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el18"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el19">24/7</li>
<li class="el20"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
</ul>
</div>
<div class="pkg-compatibility col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el21"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-reporting col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el22"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el23"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el24"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-access-security col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el25"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2" id="pkg-col" >
<div class="row pkg-inner">
<div class="header-image wp-image-404 size-full"><p>PROFESSIONAL</p></div>
<div class="pkg-pricing col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el1">£ 99 / month</li>
<li class="el2">£ 109 / month</li>
<li class="el3">unlimited</li>
<li class="el4">unlimited</li>
</ul>
</div>
<div class="pkg-competitor-comparison col-data">
<ul class="package-cat " style="list-style-type: none;display:block;">
<li class="el5"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el6"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el7"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el8"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el9"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el10"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-post-comparison-processing col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el11"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el12"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el13"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el14"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el15"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
<li class="el16"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
</ul>
</div>
<div class="pkg-support col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el17"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el18"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el19">24/7</li>
<li class="el20"><i class="fa fa-check" style="visibility: hidden;;color:green;"></i></li>
</ul>
</div>
<div class="pkg-compatibility col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el21"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-reporting col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el22"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el23"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el24"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-access-security col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el25"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2" id="pkg-col">
<div class="row pkg-inner">
<div class="header-image wp-image-404 size-full"><p>ENTERPRISE</p></div>
<div class="pkg-pricing col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el1">£ 249 / month</li>
<li class="el2">£ 269 / month</li>
<li class="el3">unlimited</li>
<li class="el4">unlimited</li>
</ul>
</div>
<div class="pkg-competitor-comparison col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el5"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el6"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el7"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el8"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el9"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el10"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-post-comparison-processing col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el11"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el12"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el13"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el14"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el15"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el16"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-support col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el17"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el18"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el19">24/7</li>
<li class="el20">8/5</li>
</ul>
</div>
<div class="pkg-compatibility col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el21"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-reporting col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el22"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el23"><i class="fa fa-check" style="color:green;"></i></li>
<li class="el24"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
<div class="pkg-access-security col-data">
<ul class="package-cat" style="list-style-type: none;display:block;text-align:center;">
<li class="el25"><i class="fa fa-check" style="color:green;"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
最佳答案
首先，您可以使用 CSS 来执行此操作:
el1.hover{ ... }
指定仅在悬停期间发生的情况。 现在，这是您的操作方法:
方法一:在CSS中创建一个新的div
为 <ul class='package-cat'> 中的每一行创建一个分区.
<div class="selectBox"/>
然后，在CSS中，设置默认状态为隐藏，并分别设置高度或宽度:
.selectBox{
visibility: none;
width: 100%;
height: 100%;
background-color: COLOR_WHEN_HOVERING;
}
然后在 CSS 中添加一个悬停，将可见性更改为可见。
.selectBox:hover{
visibility: visible;
}
多田!
编辑:确保在文本之前创建着色 div，这样它就不会覆盖它。
方法二:用div替换margins/padding并添加class
这个很简单 - 删除其他 div 左侧和右侧的所有边距，并用专门为每个原始 div 之间提供彩色边距而制作的新 div 替换它们。
<div class="marginDiv"/>
CSS:
.marginDiv{background-color: COLOR_WHEN_NOT_HOVERING; width: SPACING;}
.marginDiv:hover{background-color: COLOR_WHEN_HOVERING}
万岁!
关于Javascript 列悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27261993/