Nonaktifkan perubahan warna tag jangkar saat dikunjungi

94

Saya harus menonaktifkan perubahan warna tag jangkar saat dikunjungi. Saya melakukan ini:

a:visited{ color: gray }

(Tautan berwarna abu-abu sebelum dikunjungi.) Tetapi ini adalah cara di mana saya secara eksplisit menyatakan warna setelah tautan dikunjungi, yang sekali lagi merupakan perubahan warna.

Bagaimana saya bisa menonaktifkan perubahan warna dari sebuah tag anchor ketika dikunjungi tanpa melakukan perubahan warna yang eksplisit?

html css anchor

— popcoder
sumber

105

Tidak boleh. Anda hanya dapat mengatur gaya negara yang dikunjungi.

Untuk orang lain yang menemukan ini, pastikan Anda memilikinya dalam urutan yang benar:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

— Bradshaw kaya
sumber

4

Untuk benar-benar anal tentang hal itu, tidak seharusnya amenjadi a:link?

— nikc.org

1

Saya rasa begitu, meskipun saya jarang melakukan itu.

— Rich Bradshaw

2

@ nikc.org tidak anal sama sekali, a:linkdan ayang tidak sama. Jangkar tidak harus berupa tautan. Biasanya berubah warna hanya jika mengandung tautan.

— rustyx

204

Jika Anda hanya ingin warna jangkar tetap sama dengan elemen induk jangkar, Anda dapat memanfaatkan warisan:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Perhatikan bahwa tidak perlu mengulangi aturan untuk setiap pemilih; cukup gunakan daftar pemilih yang dipisahkan koma (urutan penting untuk elemen semu jangkar). Selain itu, Anda dapat menerapkan pemilih semu ke kelas jika Anda ingin menonaktifkan warna jangkar khusus secara selektif:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Pertanyaan Anda hanya menanyakan tentang negara bagian yang dikunjungi, tetapi saya berasumsi yang Anda maksud adalah semua negara bagian. Anda dapat menghapus pemilih lain jika Anda ingin mengizinkan perubahan warna pada semua kecuali yang dikunjungi.

— Ryan
sumber

Ini bekerja dengan baik, terima kasih! Sebagai catatan bagi orang lain, Anda mungkin harus menambahkan! Important ke tag warna agar dapat digunakan dengan benar bergantung pada apa lagi yang ada di situs web Anda: color: inherit! Important;

— Mmm

3

Di Chrome, ini hanya membuat teks tautan menjadi hitam.

— RajV

4

Apakah ada cara untuk memiliki a:linkmenjadi link warna default (biasanya biru) dan memiliki a:visitedmewarisi dari itu, tanpa hard-coding "biru" di mana saja?

— rustyx

13

Untuk :hovermenimpa :visited, dan memastikan :visitedsama dengan warna awal, :hoverharus muncul setelahnya :visited.

Jadi jika ingin menonaktifkan perubahan warna, a:visitedharus datang sebelumnya a:hover. Seperti ini:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Untuk menonaktifkan :visitedperubahan, Anda akan memberinya gaya dengan kelas non-pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }

— Rob Lokhorst
sumber

2

Apakah saya melihat ini salah atau apakah Anda melakukan kebalikan dari apa yang dikatakan dalam kutipan? Menurut W3Schools itu 1) a:link, a:visited2) a:hover3)a:active

— Max Truxa

0

Hapus selektor atau setel ke warna yang sama seperti teks Anda muncul secara normal.

— Kyle
sumber

0

Jika Anda menggunakan beberapa pra-prosesor seperti SASS, Anda dapat menggunakan @extendfitur:

a:visited {
  @extend a;
}

Akibatnya, Anda akan melihat a:visitedselektor yang ditambahkan secara otomatis untuk setiap gaya dengan aselektor, jadi berhati-hatilah dengannya, karena tabel gaya Anda mungkin bertambah besar ukurannya.

Sebagai kompromi, Anda dapat menambahkan @extend hanya di blok yang benar-benar Anda butuhkan.

— Андрей Лебедев
sumber

-1

Anda dapat mengatasi masalah ini dengan menelepon a:linkdan a:visitedmenyeleksi bersama. Dan ikuti dengan a:hoverselektor.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

— VooDoo
sumber

-1

Saya pikir jika saya menetapkan warna untuk a:visiteditu tidak baik: Anda harus tahu warna default dari tag adan setiap kali menyinkronkannya a:visited.

Saya tidak ingin tahu tentang warna default (dapat disetel dalam common.cssaplikasi Anda, atau Anda dapat menggunakan gaya luar).

Saya pikir itu solusi yang bagus:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

— Smagin Alexey
sumber

Siapa yang membuat saya minus, dapatkah Anda menulis mengapa Anda melakukannya? Tentu saja Anda bisa menggunakan warna tag A. Tetapi saya menulis jika Anda menggunakan warna

— browser

-2

a {
    color: orange !important;
}

!importantmemiliki efek bahwa properti yang dipermasalahkan tidak dapat diganti kecuali yang lain !importantdigunakan. Ini umumnya dianggap praktik yang buruk untuk digunakan !importantkecuali benar-benar diperlukan; namun, saya tidak dapat memikirkan cara lain untuk 'menonaktifkan' :visitedhanya menggunakan CSS.

— Ætérnal
sumber

-8

Menggunakan:

a:visited {
    text-decoration: none;
}

Tapi itu hanya akan mempengaruhi link yang belum diklik.

— Moliere
sumber

3

Pertanyaannya tentang warna, bukan dekorasi teks.

— Bryan Green