Cara menghapus garis bawah dari nama di hover

123

Saya memiliki html seperti itu:

<legend class="green-color"><a name="section1">Section</a></legend>

legend.green-color{
    color:green;
}

Dalam kasus saya Sectionterlihat hijau, tetapi ketika saya meletakkan penunjuk mouse di atasnya menjadi tampak seperti sebuah href, tetapi saya ingin itu tetap sama tanpa garis bawah dan mengubah warna.

Apakah mungkin untuk mencapai tanpa mengubah css atau dengan cahnge css minimum?

atau mungkin entah bagaimana dengan jquery?

html css Joper
sumber

Jawaban:

225

coba ini:

legend.green-color a:hover{
    text-decoration: none;
}
Harry Joy
sumber
20
FYI untuk orang yang menggunakan Bootstrap ... Saya perlu menggunakan "! Important" setelah "none" agar ini berfungsi. Contoh: a: hover {text-decoration: none! Important; }
JustBlossom
19

Hapus dekorasi teks untuk tag jangkar

<a name="Section 1" style="text-decoration : none">Section</a>
Adithya Surampudi
sumber
4
Ini dianggap praktik yang buruk untuk menggunakan gaya sebaris. Lebih baik memisahkan html dari gaya untuk mengurangi pekerjaan pemeliharaan nanti.
7
Saya tidak bermaksud mengemukakan perang api di sini, tapi saya suka gaya in-line ini. Maksud saya file HTML saya hanya perlu jenis gaya ini satu atau dua kali. Saya tidak melihat waktu dibenarkan dengan membuat style sheet terpisah bahkan pemisahan membuat latihan yang baik.
pengguna3454439
6

Anda dapat menggunakan CSS di bawah legend.green-color a:hoveruntuk melakukannya.

legend.green-color a:hover {
    color:green;
    text-decoration:none;
}
Small Hadron Collider
sumber
5

Untuk menjaga warna dan mencegah garis bawah pada link:

legend.green-color a{
    color:green;
    text-decoration: none;
}
Chris
sumber
3

Anda dapat menetapkan id ke link tertentu dan menambahkan CSS. Lihat langkah-langkah di bawah ini:

1. Tambahkan id pilihan Anda (harus berupa nama yang unik; hanya dapat dimulai dengan teks, bukan angka):

<a href="/abc/xyz" id="smallLinkButton">def</a>

  1. Kemudian tambahkan CSS yang diperlukan sebagai berikut:

    #smallLinkButton:hover,active,visited{

      text-decoration: none;
      }
Raymond Wachaga
sumber
2 

legend.green-color{
    color:green !important;
}
Luaskan cuplikan

BaiJiFeiLong
sumber