Remove underline on mouseover on anchor element in CSS? RSS

• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 02:43 AM|LINK

  Hello everyone, I have this markup:

  <a href="test.aspx"><input value="Go to Test Page" type="button"></a>

  In firefox, it is showing underline on mouseover. I want to remove that. How can I write the selector of my css. I tried this:

  input[type="button"]:hover
  {
      text-decoration:none;
  }

  or this:

  a input[type="button"]:hover
  {
      text-decoration:none;
  }

  But they don't work. I want to remove underline only when there is a button element between the anchor tag. 

  Thanks. 
  
  

  
  
  

  
  
  

  • Edited by asplearning on Nov 16, 2012 02:43 AM
  • Edited by asplearning on Nov 16, 2012 02:44 AM
  • Edited by asplearning on Nov 16, 2012 02:44 AM
  • Edited by asplearning on Nov 16, 2012 02:44 AM
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 03:10 AM|LINK

  asplearning

  a input[type="button"]:hover
  {
      text-decoration:none;
  }

  Remove the filter-

  a :hover
  {
      text-decoration:none;
  }

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  GMR Poola

  Member

  234 Points

  45 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 03:24 AM|LINK

  Assign a css class to the input button

  <a href="test.aspx"><input value="Go to Test Page" type="button" class='underlineNone'></a>

  Now:

  a.underlineNone : hover

   {     text-decoration:none;   }

  Regards
  GMR Poola
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 03:25 AM|LINK

  GMR Poola

  <a href="test.aspx"><input
  value="Go to Test Page"
  type="button" class='underlineNone'></a>

  <a href="test.aspx" class='underlineNone'><input value="Go to Test Page" type="button" ></a>

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Marked as answer by asplearning on Nov 21, 2012 07:20 PM
• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 03:26 AM|LINK

  Hello asteranup, if I remove the filter, all the anchor will have no underline. I just want to remove underline on the anchor tag with input type button. Is it possible?

  I found this link: http://www.w3schools.com/css/css_attribute_selectors.asp. But it can apply to input element only and not when the input element comes between another element. 

  Thanks. 

  • Edited by asplearning on Nov 16, 2012 03:27 AM
• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 03:30 AM|LINK

  Yes that may be the last option to apply a class to the anchor directly. I am just trying to find way so I don't have to go and find those input type button every where on my site.

  If there is a way to apply to all elements without going to each one, please share with me.

  Regards;

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 03:35 AM|LINK

  Hi,

  This is a little odd HTML structure. Why you wnat to have input inside anchor? To my knowledge there is no selector of such kind. You can try with jQuery-

  http://jsfiddle.net/asteranup/w2wH4/

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  asplearning

  Participant

  909 Points

  953 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 05:24 AM|LINK

  Yes maybe it is wierd. I want to create an anchor that looks like a button. How do you do that? Any advice? 

  Thanks. 

• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 05:30 AM|LINK

  Hi,

  asplearning

  Yes maybe it is wierd. I want to create an anchor that looks like a button. How do you do that? Any advice? 

  You can check this-

  http://jsfiddle.net/asteranup/GC48E/

  Or you can create a background image like button and style the anchor with  the image

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
• • Reply
  

  raju dasa

  Star

  14412 Points

  2452 Posts

  Re: Remove underline on mouseover on anchor element in CSS?

  Nov 16, 2012 05:39 AM|LINK

  Hi,

  If u want a link as button, check this site for CSS link buttons:

  http://coding.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera