Javascript列悬停_Javascript_Html_Css_Twitter Bootstrap

Javascript列悬停

javascript html css twitter-bootstrap

Javascript列悬停,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我在这里遇到了点麻烦，如果有人能帮我，那就太好了。最近，我为一个客户端创建了一个包页面，并包含了一个JS悬停效果，这样我就可以使用引导中的不同列将鼠标悬停在所有元素上。现在这可能很简单，但我遇到的问题是列之间的空间很短，我给出了一个示例图像 JS： var classes = ["el1", "el2", "el3", "el4", "el5", "el6", "el7", "el8", "el9","el10","el11","el12", "el13","el14","el15","el1

我在这里遇到了点麻烦，如果有人能帮我，那就太好了。最近，我为一个客户端创建了一个包页面，并包含了一个JS悬停效果，这样我就可以使用引导中的不同列将鼠标悬停在所有元素上。现在这可能很简单，但我遇到的问题是列之间的空间很短，我给出了一个示例图像

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");
        };
    }
};

var类=[“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”]//你的班级名单
var-elms={}；
var n={}，nclasses=classes.length；
函数changeColor（类名、颜色）{
var curN=n[classname]；
对于（变量i=0；i


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">&pound; 0 / month</li>
            <li class="el2">&pound; 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">&pound; 25 / month</li>
            <li class="el2">&pound; 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">&pound; 99 / month</li>
            <li class="el2">&pound; 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">&pound; 249 / month</li>
            <li class="el2">&pound; 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>


定价

每月定价（每年计费）
每月定价（按月计费）
产品
竞争对手

竞争对手比较

产品*
价格*
属性*
图像*
相关产品*
视频*

后比较处理

属性*
图像*
相关视频*
视频*
审查*
搜索引擎优化友好型产品说明*

支持

完整的知识库*
发射指南*
电子邮件支持*
电话支持*

兼容性

支持所有电子商务软件*

报告

用户友好的仪表板*
导入导出工具*
易于打印的报告*

安全和访问

SSL加密*

免费的

£；0/月
£；0/月
10
1




















24/7













基本的

£；25/月
£；29/月
50
1




















24/7


el1.hover{ ... }

<div class="selectBox"/>

.selectBox{
  visibility: none;
  width: 100%;
  height: 100%;
  background-color: COLOR_WHEN_HOVERING;
}

.selectBox:hover{
  visibility: visible;
}

<div class="marginDiv"/>

.marginDiv{background-color: COLOR_WHEN_NOT_HOVERING; width: SPACING;}
.marginDiv:hover{background-color: COLOR_WHEN_HOVERING}