保持活動鏈接（框）突出顯示

我正在使用「框」（實際上是列表元素），其中包含圖像和標題，用於導航。通過懸停在盒子上，盒子會收到陰影以更好地突出顯示盒子。點擊後，我想以相同的方式突出顯示框。保持活動鏈接（框）突出顯示

我設法得到一個小型的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-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的任何幫助。

來源

2014-10-07 luftikus143

你應該把目標定父元素，而不是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

來源

2014-10-07 07:02:34

非常感謝！大！是的，影子觸摸文本只是在小提琴中，而不是在我的在線版本。 – luftikus143 2014-10-07 07:43:41

@ luftikus143很好，很樂意幫忙... – 2014-10-07 08:35:25

看來，我在該行中使用的（第二個）鏈接不再適用於上述建議的解決方案。那就是：我在屏幕上的同一行中有一個jQuery鏈接和一個外部鏈接（帶有圖像標籤）。外部的一個不再工作。 [這裏是小提琴。]（http://fiddle.jshell.net/luftikus143/Ljh96fo7/2/）感謝您的任何建議。 – luftikus143 2014-10-13 08:30:07

jQuery在頁面完成加載之前查找CSS''。使用此代碼作爲您的第一行：

$(document).ready(function() {

來源

2014-10-07 13:54:10 Okx

保持活動鏈接（框）突出顯示

回答

相關問題