Shriftning yorqinligi Icon Hover Issue

Bootstrap va FontAwesome bilan menyu yaratdim. Men barcha ijtimoiy media piktogrammalarining rangi asl ranglariga o'zgartirishni xohlayman. Quyidagi qism:

HTML

 

CSS

.navbar .navbar-nav > li 
{
    border: 0px !important;
}
.navbar .navbar-nav > li > a
{
    color: #CC0033 !important;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
}
.navbar .navbar-nav > li > a:hover
{
    color: #FFFFFF !important;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color: #CC0033 !important;
}
.fa { font-family: 'FontAwesome' !important; }
.social-icon 
{
    color: #CC0033 !important;  
    font-size:25px !important;  
}
.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

Here is a non-working Demo

Sichqoncha ustiga belgi shunday ko'rsatiladi:

Twitter

Hover uchun quyidagi CSS-ni qo'ydim:

.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

Men bunga qanday erishishim mumkin? Har qanday yordamni qadrlaymiz.

0
Siz har qanday narsada ! Important dan foydalanishingiz kerak emas :) bootply.com/1ywzSCHZ5Z
qo'shib qo'ydi muallif Davin Tryon, manba
@ C0dekid: Bu ishlaydi. Buni javob sifatida qo'shishingiz mumkin. :)
qo'shib qo'ydi muallif Senjuti Mahapatra, manba
Buni sinab ko'rishingiz mumkin: .navbar .navbar-nav li: hover> .fa {color: # 00ACED! } ?
qo'shib qo'ydi muallif Jer, manba
@SenjutiMahapatra mening javobimni qo'shdi :-)
qo'shib qo'ydi muallif Jer, manba
Sizning Namoyishim men uchun ishlaydi (sizning belgi sizni ko'rmaysiz.
qo'shib qo'ydi muallif Shadowfox, manba

6 javoblar

Buni ham sinab ko'ring

    .navbar .navbar-right > li > a:hover{
       color: #fff !important;
     }
    .navbar .navbar-right > li > a:hover .fa{
        color: #fff !important;
    }
3
qo'shib qo'ydi

Faqat quyidagi kodni olib tashlang:

.navbar .navbar-nav > li > a:hover {
    /* background-color: #CC0033 !important; */
}

background-color shriftning ajoyib belgilarining rangi soya soladi, shuning uchun ular hoverda paydo bo'lmaydi.

Buning o'rniga, hover ustiga shriftning ajoyib tumorlarning rangini o'zgartirmoqchi bo'lsangiz, quyidagi kodni ishlating:

.navbar .navbar-nav > li > a:hover > i {
    color: #00abf1 !important;
}

EDIT -ni tanlang

To change the background-color of the li to white, Faqat quyidagi kodni olib tashlang:

nav > li > a:hover {
    /* background-color: #eee; */
}
2
qo'shib qo'ydi
Tahrirlangan javobni tekshiring.
qo'shib qo'ydi muallif nashcheez, manba
Hover bilan background-color kodini li o'zgartirishi mumkin?
qo'shib qo'ydi muallif Senjuti Mahapatra, manba

Ushbu ikki qatorni o'zgartirib, kerakli effektga erishishingiz mumkin -

.navbar .navbar-nav > li > a:hover > i {
color: #00abf1 !important;
 }
.navbar .navbar-nav > li > a:hover {
background-color: white !important;
}

Shu tarzda li ning orqa fon rangi oq rangga o'zgarishi mumkin.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.navbar .navbar-nav > li 
{
    border: 0px;
}
.navbar .navbar-nav > li > a
{
    color: #CC0033;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
}
.navbar .navbar-nav > li > a:hover
{
    color: #FFFFFF;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color: #CC0033 !important;
}
.fa { font-family: 'FontAwesome' !important; }
.social-icon 
{
    color: #CC0033;  
    font-size:25px;  
}
.navbar .navbar-nav > li > a:hover > i {
    color: #00abf1 !important;
}
.navbar .navbar-nav > li > a:hover {
    background-color: white !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
       
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
       
     

1
qo'shib qo'ydi
Zo'r. Rahmat :)
qo'shib qo'ydi muallif Senjuti Mahapatra, manba

Agar siz ushbu kodni o'zgartirsangiz:

.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

Bu bilan:

.navbar .navbar-nav li a:hover > .fa-twitter-square { color: #00ACED !important; }

Buning ustiga, omad tilaymiz!

1
qo'shib qo'ydi
.fa har bir ijtimoiy media belgisiga turli uslublar berish uchun .fa-twitter-square bilan o'zgartirilishi mumkin :)
qo'shib qo'ydi muallif Senjuti Mahapatra, manba
Hover bilan background-color kodini li o'zgartirishi mumkin?
qo'shib qo'ydi muallif Senjuti Mahapatra, manba
Bu fonning rangi oqini butunlay emas, balki faqat a ga bermaydi
qo'shib qo'ydi muallif Senjuti Mahapatra, manba
bu yerda bu muammoni ko'rishingiz mumkin.
qo'shib qo'ydi muallif Senjuti Mahapatra, manba
@SenjutiMahapatra buni sinab ko'rsangiz: .navbar .navbar-nav.navbar-right li: bir {fon: #FFF! Muhim; } fonda hover bo'lsa, fon belgi ko'k rangga ega bo'ladi :)
qo'shib qo'ydi muallif Jer, manba
@SenjutiMahapatra ankraj yorlig'i li ni to'ldiradi, shuning uchun texnikada agar li ning fon rangini hover ustiga o'zgartirishni xohlasangiz hech narsa qilmaydi. Shunday qilib, siz anchor yorlig'ini tarashingiz kerak.
qo'shib qo'ydi muallif Jer, manba

Buni faqat o'zgartiring

.navbar .navbar-nav > li > a:hover
{
    color: #FFFFFF !important;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color: #CC0033 !important;
    color: #00aced
}

bu bilan

.navbar .navbar-nav > li > a:hover
{
    color: #FFFFFF !important;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color: #CC0033;
    color: #00aced
}

va buni qo'shing

.navbar .navbar-right > li > a:hover{
    background-color: #fff 
 }
.navbar .navbar-right > li > a.twitter:hover i{
    color: #00aced !important;
}

Barcha ezgu tilaklarni tilayman :)

1
qo'shib qo'ydi

Buni CSS kodingizga qo'shing:

.social-icon:hover {
    color: white!important;
}

Men uchun shunday ishlaydi ...

0
qo'shib qo'ydi