biggerlink other links – CSS classes

The jquery.biggerlink plugin applies a number of configurable classes to the elements involved. These provide the hooks you need to give the user valuable interaction feedback.

Note: The order these classes are used in the stylesheet can be significant.

• hoverclass default value: bl-hover

  Added dynamically to the biggerlink container element on mouseover or when a contained link is focused. Also used here, in combination with biggerclass, to simulate contained links being moused over.

  #nav li.bl-hover {
  	background-color: #fee;
  	}
  			
  			

• biggerclass default value: bl-bigger

  Added to all the contained links, unless otherstriggermaster is false (as it is here) in which case it is only applied to the first. Styles applied with this class are useful to simulate the link being moused over directly when the cursor is over the biggerlink container. Provides a visual connection between the container and the link it will trigger when clicked.

  li.bl-hover a.bl-bigger:link {
  	color: #f66;
  	text-decoration: underline;
  	}
  li.bl-hover a.bl-bigger:visited {
  	color: #f66;
  	text-decoration: underline;
  	}
  			
  			

• hoverclass2 default value: bl-hover2

  If otherstriggermaster is set to false (as it is here) this additional class is added to the containing element when links other than the first are moused over or focused. CSS applied with this class can override the styles applied by hoverclass to provide visual hints that the function or destination of this link differs from the first.

  #nav li.bl-hover2 {
  	background-color: #eef;
  	}
  			
  			

  Used here to override the style applied to the first link with the hoverclass when the second link is moused over or focused.

  li.bl-hover2 h3 a.bl-bigger:link {
  	color: #933;
  	text-decoration: none;
  	}
  li.bl-hover2 h3 a.bl-bigger:visited {
  	color: #933;
  	text-decoration: none;
  	}
  			
  			

• clickableclass default value: bl-hot

  Applied to the element to which the biggerlink is applied. Use this class in your CSS selector for styles you want to be applied only if the biggerlink behaviour is applied.

  Not used in this example.