在悬停时无法更改元素的边框颜色

时间:2015-05-30 19:11:52

标签: css css3 button css-transitions

当用户将鼠标悬停在按钮上时,我正在尝试更改三角形的颜色。

我已尝试将样式应用于按钮的悬停子元素,但它不起作用。

如何使用普通按钮的背景颜色让按钮悬停时三角形改变颜色。

我的代码:



resultsList

#contact-form .submit {
    background: none repeat scroll 0 0 #3f3f3f;
    display: block;
    margin-top: 30px;
    padding: 16px 40px;
    width: 115px;
}

.contact-submit a {
	color: #222;
    font-weight: normal;
}

#contact-form > .contact-submit > .hvr-bubble-float-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform;
  transition-property: transform;
  top: 0;
}

#contact-form > .contact-submit > .hvr-bubble-float-top:before {
  position: absolute;
  z-index: -1;
  content: '';
  left: calc(50% - 10px);
  top: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #666 transparent;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

#contact-form > .contact-submit > .hvr-bubble-float-top:hover, #contact-form > .contact-submit > .hvr-bubble-float-top:focus, #contact-form > .contact-submit > .hvr-bubble-float-top:active {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  display: inline-block;
  background-color: #666;
  border-color: transparent transparent #666 transparent !important;
}

#contact-form > .contact-submit > .hvr-bubble-float-top:hover:before, #contact-form > .contact-submit > .hvr-bubble-float-top:focus:before, #contact-form > .contact-submit > .hvr-bubble-float-top:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  position: absolute;
  z-index: 5000;
}




2 个答案:

答案 0 :(得分:0)

由于此代码,CSS尝试转换的唯一属性是transform

transition-property: transform;

您发布的代码中有很多内容,但首先要尝试的是将其更改为:

transition-property: transform, border-color;

并再试一次。

答案 1 :(得分:0)

更新demo2 <a>clear_button2</a>的{​​{1}}。使用样式作为基础:

public String decrypte (String encCardNo) throws KeyStoreException, NoSuchAlgorithmException, CertificateException, IOException, UnrecoverableEntryException, NoSuchPaddingException, InvalidKeyException, IllegalBlockSizeException, BadPaddingException{
    FileInputStream is = new FileInputStream("C:/Users/admin/Desktop/keystore/ksjksformat.jks");    
    String keystpassw = "9801461740";
    String alias = "ksjksformat";       
        KeyStore ks = KeyStore.getInstance(KeyStore.getDefaultType());                      
        ks.load(is,keystpassw.toCharArray() );      
        Key key = ks.getKey(alias, keystpassw.toCharArray());
        Certificate cert = ks.getCertificate(alias);
        PublicKey publicKey = cert.getPublicKey();
        new KeyPair(publicKey, (PrivateKey) (key));     
        KeyStore.ProtectionParameter protParam = new KeyStore.PasswordProtection(keystpassw.toCharArray());
        KeyStore.PrivateKeyEntry pkentry = (PrivateKeyEntry) ks.getEntry(alias, protParam);
        PrivateKey myPrivateKey =pkentry.getPrivateKey();
        Cipher cipher = Cipher.getInstance("RSA");
        cipher.init(Cipher.DECRYPT_MODE, myPrivateKey); 
        byte[] decoded = Base64.decodeBase64(encCardNo);        
        byte[] cipherData = cipher.doFinal(decoded);
        return new String(cipherData);      
}`

Sample