添加邊框以填充到主動/非主動類

Question

我試圖實現以下目標： 我有圖像，我需要邊框1px黑色和1px白色img以實現某些效果。在懸停的3px邊框點擊成爲活動類並將懸停更改爲3px的固定邊框。

什麼是最好的方法呢？

我想這樣做與鏈接 上填充的3px，獲得以下：

a { 
    float:left; 
    background-color:white; 
    padding:3px; 
} 

和

img { 
    max-width:100%; 
    float:left; 
} 

的問題是，邊界不等於與點點的舉動img。 此外，當我將鼠標懸停所有的UI我需要的不透明度0.5，它是使問題與a

所以我找了3個邊界與懸停和主動/非活動的最佳解決方案，而不會影響img

我的代碼是：

<ul> 
    <li> 
     <div> 
      <a class="active"> 
       <img> 
      </a> 
     </div> 
    </li> 
    <li> 
     <div> 
      <a> 
       <img> 
      </a> 
     </div> 
    </li> 
</ul> 

Answer 1

不知道這是你的想法，但我希望下面的輸出可以幫助你開始。

這裏主要的竅門是把你的<img>內3的div：

• 最裏面的div是你的白色邊框
• 中間格是你的黑色邊框
• 最外層的DIV是透明1px邊框

最後一個是必需的，以便圖像不會移動 - 因爲邊框已經存在並且不必生成whe你徘徊。

所以當你懸停時：外部div變白，中間div（以前是黑色）變成白色，最後一個div仍然是白色。瞧！懸停時，您的「3px純白色」邊框。

爲了切換一個活動的類，將堅持，那麼你將需要JavaScript。在這種情況下，我只是繼續使用JQuery。

最後一點：由於我取消了你的<a>標記，我只是在你最外面的div上放了一個cursor:pointer規則，這樣它仍然會看起來像你在鏈接上徘徊。你可以將任何你的鏈接動作放在你的javascript onclick規則中。

希望這會有所幫助！

$('.outer').on('click',function(){ 
 
    $('.active').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

body { 
 
    background:gray; 
 
} 
 

 
li { 
 
    margin-top:15px; 
 
} 
 
li * { 
 
    transition:all ease 0.3s; 
 
} 
 
li:hover { 
 
    cursor:pointer; 
 
} 
 

 
.outer { 
 
    border:1px solid transparent; 
 
} 
 

 
.outer:hover,.outer:hover > .black-border { 
 
    border:1px solid white; 
 
} 
 

 
.outer:hover img { 
 
    opacity:0.5; 
 
} 
 

 
.active { 
 
    border:1px solid white; 
 
} 
 

 
.active > .black-border { 
 
    border:1px solid white; 
 
} 
 

 
img { 
 
    max-width:100%; 
 
    padding:0; 
 
    margin:0; 
 
    vertical-align:top; 
 
    background-size:cover; 
 
} 
 

 
.black-border { 
 
    border:1px solid black; 
 

 
} 
 
.white-border { 
 
    border:1px solid white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
     <div> 
 
      <div class="outer"> 
 
      <div class="black-border"> 
 
      <div class="white-border"> 
 
       <img src="https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg"> 
 
      </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div> 
 
      <div class="outer"> 
 
      <div class="black-border"> 
 
      <div class="white-border"> 
 
       <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg"> 
 
      </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</ul>