CODEWITHSUNDEEP
css
Jaz
Jaz

Reputation: 25

Adding css border style

Can someone help me, please?. I want to add a border style in the link:hover, to a component of primefaces. I add like this:

.ui-contextmenu .ui-menuitem-link:hover{
  font-weight: bold;
  border-style: solid;
  border-width: thin;
}

In a file calling pfcrud.css. The problem is that, the border style is not working/showing. Thanks!.

Upvotes: 1

Views: 158

Answers (3)

Priyesh Kumar
Priyesh Kumar

Reputation: 2857

May be this you want to try : 

.ui-contextmenu .ui-menuitem-link:hover{
  font-weight: bold;
  border: 1px solid #a32ddf
}

Updated fiddle of bucurvad: https://jsfiddle.net/upq3045g/3/

More info about border at : http://www.w3schools.com/css/css_border.asp

Upvotes: 2

UncaughtTypeError
UncaughtTypeError

Reputation: 8712

Use the shorthand method: border: thin solid black;

CSS

.ui-contextmenu .ui-menuitem-link:hover{
  font-weight: bold;
  border: thin solid black;
}

Note that this will change the box-model of the element in question, so when you hover over it this border will effectively increase the element size. You may need to consider accommodating for that change by declaring a rule for the element's natural/default state as well, usually a border with the same width, but transparent works in most cases.

Upvotes: 2

bucurvlad
bucurvlad

Reputation: 119

Have you tried using

.ui-contextmenu .ui-menuitem-link:hover {
border-style: solid black 2px;
}

Is this example ok? https://jsfiddle.net/upq3045g/2/

Upvotes: -1

Related Questions