在懸停按鈕周圍繪制輪廓

Question

我想在矩形按鈕周圍“繪制”輪廓，這意味着我希望邊框能夠過渡但不能淡入。我在這些按鈕上已經具有很多效果。繪制輪廓CSS，但是它什么也沒做。

這是我的代碼

 function hoverIcons(classnm) { document.getElementById(classnm).css({height: '+=30%', width: '+=30%'}); } function nothoverIcons(classnm) { document.getElementById(classnm).css({height: '+=30%', width: '+=30%'}); } 

 #menu { position: fixed; bottom: 20; right: 20; width: 80; height: 30px; background-color: Menu background; z-index: 10; } #mainicons { position: fixed; bottom: 20px; right: 193px; text-align: center; } #mainicons i { display: inline-block; margin-top: 0; margin-left: -3px; height: 30px; width: 50px; padding: 10px; color-color: Main icon; background-color: Main icon background; text-transform: uppercase; font-size: 15px; line-height: 30px; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #mainicons i:hover { color-color: Hover; background-color: Main icon; transform: scale(1.1); -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } /*-- BEGINNING BORDER EFFECT (PASTED) --*/ #mainicons { transition: color 0.25s; box-sizing: border-box; } #mainicons::before, #mainicons::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%; } #mainicons::before, #mainicons::after { border: 2px solid transparent; width: 0; height: 0; } #mainicons::before { top: 0; left: 0; } #mainicons::after { bottom: 0; right: 0; } #mainicons:hover { color: #97c5e0; } #mainicons:hover::before, #mainicons:hover::after { width: 100%; height: 100%; } #mainicons:hover::before { border-top-color: #97c5e0; border-right-color: #97c5e0; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } #mainicons:hover::after { border-bottom-color: #97c5e0; border-left-color: #97c5e0; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; } /*-- BEGINNING BORDER EFFECT (PASTED) --*/ /* originally written in SCSS #mainicons { transition: color 0.25s; box-sizing: border-box; &::before, &::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%;} &::before, &::after { border: 2px solid transparent; width: 0; height: 0; } &::before { top: 0; left: 0; } &::after { bottom: 0; right: 0; } &:hover { color: #97c5e0; } &:hover::before, &:hover::after { width: 100%; height: 100%; } &:hover::before { border-top-color: #97c5e0; border-right-color: #97c5e0; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } &:hover::after { border-bottom-color: #97c5e0; border-left-color: #97c5e0; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; } } */ 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> <div id="menu"> <div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')"> <a href="/" title="Home"><i class="fa fa-home"></i></a> <a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a> <a href="/submit" title="Request"><i class="fa fa-pencil "></i></a> <a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a> </div> </div> 

我必須承認，要了解他/她為大綱所做的事情（ https://codepen.io/giana/pen/yYBpVY ）想要做的事情非常復雜。.因此，如果您有更好/更輕松的方法這個，非常感謝！

Answer 1

您的html似乎很有趣-您有一個html作為中心按鈕，卻沒有出現？

您可以只使用“紫色”或“藍色”等。如果您不想使用html代碼/ id，則可以輕松找到顏色，而無需在CSS中定義它們-美元符號通常是在jquery中使用過-我之前從未見過它在css中使用過，但這只是我，我不會說它無法使用[或我會得到糾正]。 編輯： CSS vars仍然是實驗性技術， 在Chrome或IE中不支持 （盡管在Edge中受支持）..由於在Chrome中不支持，所以我暫時暫不使用它

我對您的代碼做了一些調整。 我在按鈕代碼中添加了display：block，因此現在它們在窗口中的另一個下面顯示了一個。 刪除它，它們將顯示，因為布局將以您的原始代碼顯示。 出於摘要 / jsfiddle窗口的目的，它更方便。 我用您定義中使用的html顏色替換了顏色，但是就像我說的那樣，將來您可以只說border-color:red等。

請注意，這僅作為指導。 視需要調整！

 button { display: block; background: none; border: 0; box-sizing: border-box; margin: 1em; padding: 1em 2em; box-shadow: inset 0 0 0 2px #f45e61; color: #f45e61; font-size: inherit; font-weight: 700; position: relative; vertical-align: middle; &::before, &::after { box-sizing: inherit; content: ''; position: relative; width: 100%; height: 100%; } } .draw { transition: color 0.25s; border: 2px solid transparent; height: 100%; } .draw::after { bottom: 0; right: 0; } .draw:hover { color: #60daaa; border-color: #fbca67; width: 100%; } .meet { border-top-color: #fbca67; border-right-color: #fbca67; } .meet::after { top: 0; left: 0; } .meet:hover { color: #fbca67; z-index: 1; border-bottom-color: #fbca67!important; border-left-color: #fbca67!important; } .center { width: 200px; height: 100px; text-align: center; padding: 10px; border-style: solid; border-top-width: 2px!important; border-bottom-width: 2px!important; border-color: #6477b9; color: #6477b9; } .center:hover { color: #FF0000; border-left-width: 2px!important; border-right-width: 2px!important; z-index: 90!important; } .center:focus { border: 3px dashed red; color: forestgreen; } .spin { width: 5em; height: 5em; padding: 0; border-width: 2px; border-style: solid; border-color: transparent; top: 0; left: 0; } .circle { border-radius: 100%; box-shadow: none; } .thick { color: #f45e61; z-index: -1; background: #ffffff; border-color: #f45e61; } .thick:hover { color: #fff; font-weight: 700; background: #f45e61; } .thick::after { mix-blend-mode: color-dodge; } /* Page styling */ html { background: #4b507a; } body { background: #fefefe; color: #4b507a; font: 300 24px/1.5 Lato, sans-serif; margin: 1em auto; max-width: 36em; padding: 1em 1em 2em; text-align: center; } .buttons { isolation: isolate; } h1 { font-weight: 300; font-size: 2.5em; } 

 <!---<h1>CSS Border Transitions</1>--> <section class="buttons"> <button class="draw">Draw</button> <button class="draw meet">Draw Meet</button> <button class="center">Center</button> <button class="spin">Spin</button> <button class="spin circle">Spin Circle</button> <button class="spin thick">Spin Thick</button> </section> 

在這里擺弄

Answer 2

我終於明白了，效果實際上是在容器上設置的，您希望在鏈接上設置它。

基本上，您需要更新選擇器。

例

 function hoverIcons(classnm) { // document.getElementById(classnm).css({height: '+=30%', width: '+=30%'}); } function nothoverIcons(classnm) { // document.getElementById(classnm).css({height: '+=30%', width: '+=30%'}); } 

 #menu { position: fixed; bottom: 20; right: 20; width: 80; height: 30px; background-color: Menu background; z-index: 10; } #mainicons { position: fixed; bottom: 20px; right: 193px; text-align: center; } #mainicons a { transition: color 0.25s; display: inline-block; position: relative; margin: 0 25px; padding: 10px 20px; box-sizing: border-box; } a::before, a::after { content: ''; position: absolute; box-sizing: border-box; width: 100%; height: 100%; } a::before, a::after { border: 2px solid transparent; width: 0; height: 0; } a::before { top: 0; left: 0; } a::after { bottom: 0; right: 0; } a:hover { color: #97c5e0; } a:hover::before, a:hover::after { width: 100%; height: 100%; } a:hover::before { border-top-color: #97c5e0; border-right-color: #97c5e0; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } a:hover::after { border-bottom-color: #97c5e0; border-left-color: #97c5e0; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; } 

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <div id="menu"> <div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')"> <a href="/" title="Home"><i class="fa fa-home"></i></a> <a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a> <a href="/submit" title="Request"><i class="fa fa-pencil "></i></a> <a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a> </div> </div> 

 #mainicons a{ /* select here the links */
  transition: color 0.25s;
  box-sizing: border-box;
  display:inline-block;
  position:relative ;
  margin:0 25px;
  padding: 10px 20px;
  box-sizing:content-box;

  &::before,
  &::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    }

  &::before,
  &::after {
    border: 2px solid transparent;
    width: 0;
    height: 0;
    }

  &::before {
    top: 0;
    left: 0;
  }

  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover {
    color: #97c5e0;
  }

  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: #97c5e0; 
    border-right-color: #97c5e0;
    transition:
      width 0.25s ease-out, 
      height 0.25s ease-out 0.25s; 
  }

  &:hover::after {
    border-bottom-color: #97c5e0;
    border-left-color: #97c5e0;
    transition:
      border-color 0s ease-out 0.5s,
      width 0.25s ease-out 0.5s,
      height 0.25s ease-out 0.75s; 
  }
}