Question

我正在使用“盒子”（实际上是列表元素），其中包含用于导航的图像和标题。通过将鼠标悬停在框上，框会收到一个阴影，以便更好地突出显示框。点击后，我想以同样的方式突出显示框。

我设法得到一个小的jQuery脚本以这种方式工作，CSS只是部分。 CSS有点缺陷，我看不出如何让它正常工作。代码下面是a fiddle。 “.active”类位于CSS列表的底部。

    <div class="explore">
        <div class="explore_body">
            <ul id="nav">
                <li><a href="#!" ><img src="http://geg.informea.org/wp-content/themes/geg/images/air_pollution.png" /></a><a href="#!" class="album_title">Air pollution and air quality</a></li>
                <li><a href="#!" ><img src="http://geg.informea.org/wp-content/themes/geg/images/biodiversity.png"/></a><a href="#!" class="album_title">Biodiversity</a></li>
            </ul>
        </div>      
    </div>

CSS： .explore { margin-left：auto; margin-right：auto; 宽度：70％; margin-top：20px; }

    .explore_body {
      width: 100%;
      /* border: 1px solid #f00; */
      padding-bottom: 5px;
      padding-top: 5px;
      clear: both;
      background: #F4F4F4;
      *background: #F4F4F4; /* star hack to target IE6 & 7*/
    }

    .explore_body ul {
      margin: 5px;
      padding-top: 5px;
      clear: both;
      width: 100%;
    }

    .explore_body ul li {
      display: inline-block; /*IE7 doesn't support inline-block */
      zoom: 1;
      *display: inline; /* star hack to target IE6 & 7*/
      /* background: url(images/album.png); */
      width: 130px;
      height: 145px;
      margin: 5px 5px;
    }

    .explore_shadow {
      width: 100%;
      height: 20px;
      /* background: url(images/explore_shadow.png) no-repeat; */
    }

    .explore_body ul li img {
      width: 120px;
      height: 100px;
      margin: 5px 0px 5px 5px;
    }

    .explore_body ul li {
      opacity: 0.9;
      filter:alpha(opacity=90); /* For IE8 and earlier */
    }

    .explore_body ul li:hover {
      opacity: 1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      -webkit-box-shadow: 3px 3px 3px 3px #666;
    }       

    .explore_body ul li:selected {
      opacity: 1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      -webkit-box-shadow: 3px 3px 3px 3px #666;
    }       


    .album_title {
      display: inline-block;
      float: left;
      margin-top: 0px;
      margin-left: 5px;
      color: #3c72d2;
      font-weight: bold;
      max-width: 140px;
      text-align: left;
      clear: both;
    }

    .album_title:hover {
      color: #1F3D6F;
    }

    .active {
      display: inline-block; /*IE7 doesn't support inline-block */
      zoom: 1;
      *display: inline; /* star hack to target IE6 & 7*/
      /* background: url(images/album.png); */
      width: 130px;
      height: 135px;
      opacity: 1;
      filter:alpha(opacity=100); /* For IE8 and earlier */
      -webkit-box-shadow: 3px 3px 3px 3px #666;
    }

jQuery的：

        $(function () {
        $("#nav li a").click(function (e) {
            e.preventDefault();
            $("#nav li a").addClass("active").not(this).removeClass("active");
        });
    });

感谢您帮助确定正确的CSS。

Answer 1

您应该定位父元素而不是a标记，因此请修改您的脚本，如

$(function () {
    $("#nav li a").click(function (e) {
        e.preventDefault();
        $("#nav li a").parent().addClass("active").not($(this).parent()).removeClass("active");
    });
});

Demo

此外，如果您看到，框阴影触及文本的底部，因此看起来不专业，为了解决这个问题，请将padding-bottom: 10px;分配给.explore_body ul li

Demo 2

Answer 2

jQuery在＆＃39;＆＃39;之前查找CSS＆＃39;＆＃39;页面完成加载。使用此代码作为第一行：

    $( document ).ready( function() {

保持活动链接（框）突出显示

2 个答案: