CODEWITHSUNDEEP
css
Annie Tsai
Annie Tsai

Reputation: 117

How to delete the weird blue underline

As I mention in title, I can't find what's wrong and I don't even know why there is a blue line while the pointer hover on.
DEMO: https://anniesnoopymd.github.io/web-final-project/dist/new.html

<div class="line">─ ─ ─ ─ ─ ─ ─ ─ ─ 登入安全(至少要有一種安全判斷) ─ ─ ─ ─ ─ ─ ─ ─ ─</div>



.line {
  text-align: center;
  font-size: 15px;
  color: #fc3f64;
  font-weight: bold;
  border: none;
  text-decoraion:none;
}
.line:hover {
  text-decoraion:none;
}

Upvotes: 0

Views: 254

Answers (6)

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

Find issue and then fix it: Your whole code is wrapped inside tag which caused every thing to be underlined.

See this

https://drive.google.com/file/d/0BwIWuJmCDI1va0VRRWp4UThvS0k/view?usp=sharing

You can remove this <a> tag fix this. Or use following CSS to fix this

a:hover, a:active{
   text-decoration:none !important;
}

if this does not work use a:hover *, a:active * also

Upvotes: 0

Obed Amoasi
Obed Amoasi

Reputation: 2039

there is a typo in your code, change 

text-decoraion:none

to

 {
text-decoration:none;
}

if it doesnt work, use a more specific query selector, (giving the div an 'id' would do)

Upvotes: 0

Emad Dehnavi
Emad Dehnavi

Reputation: 3441

As you can see in picture, the a tag, have some defualt value come from your bootstrap when hover occurred. So, you can fix this with adding a class to this tag and override the bootstrap style hover. for example, if you change you tag and add a class like : 

<a class="overrideStyle">

and in your css : 

 .overrideStyle{ text-decoration: none; }

it will fix the problem.

enter image description here

Upvotes: 0

j-printemps
j-printemps

Reputation: 1298

After checking your code, you need to override the default <a> tag, which as text-decoration: underline;. Also, I'm not sure you should contain your form in a <a>.

a:hover, a:focus {
  color: #158cba;
  text-decoration: none;
}

Upvotes: 0

itacode
itacode

Reputation: 3787

There is a typo:

<a href="#" class="btn btn-default">全部欄位<a>

you should close the a tag:

<a href="#" class="btn btn-default">全部欄位</a>

Please consider to use a validator when coding because there are other unclosed tags and problems in the code.

Upvotes: 1

FKEinternet
FKEinternet

Reputation: 1060

Try

.line:active
{
    text-decoration:none;
}

Upvotes: 1

Related Questions