做什麼：專注的工作如：懸停？

這是我的問題。我想擁有一個圖標（搜索圖標，日曆圖標等）的input-group-addon可以按照特定順序繼承其輸入字段的懸停，焦點和活動狀態。我有它的工作懸停，但由於某種原因，特異性忽略了焦點狀態。我認爲這是一個在我的代碼中有衝突的css指令，但我在CODEPEN中隔離了這個問題，並且它也在那裏。做什麼：專注的工作如：懸停？

總之，我希望輸入組插件邊框在我關注它（選項卡或單擊）時與其輸入字段無縫地變爲黃色，就像我在其上懸停時一樣。

我的HTML：

我的CSS（使用鉻如果可能的話我這裏沒有包括corssbrowser東西更簡單地閱讀。）此外，這原本是建立在SCSS ：

.mar40 { 
    margin: 40px auto; 
} 

.form-control { 
    border-width: 2px; 
    border-color: #8f8f8f; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    color: #bbbbbb; 
    -webkit-border-radius: 34px; 
    -moz-border-radius: 34px; 
    -ms-border-radius: 34px; 
    border-radius: 34px; 
    background: #211E1E; 
} 

.form-control:focus, 
.form-control:hover { 
    border-color: rgba(248, 151, 29, 0.77); 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    outline: none; 
    transition: all 1s ease; 
} 

.form-control .input-group-addon { 
    background: #8f8f8f; 
    border-color: #555555; 
    border-width: 2px; 
} 

.controls .input-group-addon.right.search { 
    background: #30373e; 
    border: 2px solid #8f8f8f; 
    color: #bbbbbb; 
    border-left: none; 
    border-radius: 0px 20px 20px 0; 
    padding: 4px 10px; 
    min-width: 0; 
} 

.controls .input-group-addon.right.search:before { 
    content: "\f4a4"; 
    font-family: 'Ionicons'; 
    font-size: 16px; 
} 

.controls:focus .input-group-addon.right, 
.controls:hover .input-group-addon.right, 
.controls:active .input-group-addon.right { 
    border: 2px solid rgba(248, 151, 29, 0.77) !important; 
    border-left: none !important; 
    transition: all 1s ease; 
} 

.controls:focus .input-group-addon.right:before, 
.controls:hover .input-group-addon.right:before, 
.controls:active .input-group-addon.right:before { 
    color: rgba(248, 151, 29, 0.77); 
    transition: all 1s ease; 
}

上懸停/聚焦所需的效果插圖/活性

這是我得到的焦點

而且方便的花花公子CODEPEN

謝謝！

來源

2016-04-02 LOTUSMS

'：focus'和'：hover'具有相同的特異性。我無法在現場演示中重現問題。 – Quentin

嗯。真？這很奇怪。你在使用chrome嗎？也許這是一個瀏覽器的東西。而且我總是關注和盤旋也有同樣的特性，但我想不出爲什麼它不會爲我做這件事。順便說一句，我添加了一張我在結尾的圖片 – LOTUSMS

:focus適用於input而不是父容器，因此您的選擇器組應如下所示。（注意改變選擇第一行）

.form-control:focus + .input-group-addon.right, 
.controls:hover .input-group-addon.right, 
.controls:active .input-group-addon.right { 
    border: 2px solid rgba(248, 151, 29, 0.77) !important; 
    border-left: none !important; 
    transition: all 1s ease; 
}

據我知道，當你:hover你也間接徘徊父等等.controls:hover .input-group-addon.right也工作時.form-control:hover是適用於孩子。因此.form-control和.input-group-addon.right都得到邊界。

但是，如果您專注於.form-control，則焦點選擇器僅適用於input，並且不會將其應用於其容器。因此只有.form-control獲得邊界，而不是.input-group-addon。因此，必須將選擇器更改爲基於input的.input-group-addon的樣式，而不是容器的焦點。

CodePen Demo

來源

2016-04-02 13:34:43 Harry

這真棒。它確實解決了這個問題，我理解它。這實際上是一個特殊性的問題，而是一個人爲錯誤，而不是選擇者。好東西！不過我有一個小小的增加。在某些情況下，我在左側輸入了組添加，這稍微改變了特異性。複製與.left類一起提供的代碼並不能解決問題，因爲它是寫入HTML的方式。換句話說，持有輸入組插件的span標籤被放置在輸入字段 – LOTUSMS

以上。我會接受這個答案，無論如何，我只是想你可能想要調整這個調整。我將HTML添加到codepen – LOTUSMS

@LOTUSMS：是的，我使用了兄弟選擇器（'+'）。 CSS兄弟選擇器只選擇DOM中參考元素下方的元素（小孩，後代或後代兄弟）。所以，如果''input-group-addon'元素在'.form-control'之前，它將不起作用。也許你可以調整浮動（也就是設置float：right）或者設置position：absolute等來保留'.form-control'下面的'.input-group-addon'，但仍然可以在'.form-control'之前顯示。 – Harry

做什麼：專注的工作如：懸停？

回答

相關問題