Develop Reference

jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output

In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}

As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}

For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.

How to trigger bootstrap's mouseover effect programmatically

In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?

Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)

Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!

Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.

:touch CSS pseudo-class or something similar?

I am trying to make a button, such that when the user clicks on it, it changes its style while the mouse button is being held down. I also want it to change its style in a similar way if it is touched in a mobile browser. The seemingly-obvious thing to me was to use the CSS :active pseudo-class, but that didn't work. I tried :focus, and it didn't work too. I tried :hover, and it seemed to work, but it kept the style after I took my finger off the button. All of these observations were on an iPhone 4 and a Droid 2.
Is there any way to replicate the effect on mobile browsers (iPhone, iPad, Android, and hopefully others)? For now, I am doing something like this:
<style type="text/css">
#testButton {
background: #dddddd;
}
#testButton:active, #testButton.active {
background: #aaaaaa;
}
</style>
...
<button type="button" id="testButton">test</button>
...
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
$("*").live("touchstart", function() {
$(this).addClass("active");
}).live("touchend", function() {
$(this).removeClass("active");
});
</script>
The :active pseudo-class is for desktop browsers, and the active class is for touch browsers.
I am wondering if there is a simpler way to do it, without involving Javascript.

There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors
:active should work, I would think.
Order on the :active/:hover pseudo class is important for it to function correctly.
Here is a quote from that above link
Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:
The :hover pseudo-class applies while the user designates an element
(with some pointing device), but does
not activate it. For example, a visual
user agent could apply this
pseudo-class when the cursor (mouse
pointer) hovers over a box generated
by the element. User agents not
supporting interactive media do not
have to support this pseudo-class.
Some conforming user agents supporting
interactive media may not be able to
support this pseudo-class (e.g., a pen
device).
The :active pseudo-class applies while an element is being activated by
the user. For example, between the
times the user presses the mouse
button and releases it.
The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other
forms of text input).

Since mobile doesn't give hover feedback, I want, as a user, to see instant feedback when a link is tapped. I noticed that -webkit-tap-highlight-color is the fastest to respond (subjective).
Add the following to your body and your links will have a tap effect.
body {
-webkit-tap-highlight-color: #ccc;
}

I was having trouble with mobile touchscreen button styling. This will fix your hover-stick / active button problems.
body, html {
width: 600px;
}
p {
font-size: 20px;
}
button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}
button:active {
background: black;
color: white;
}
.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}
.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>
<button>Normal button</button>
<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>
<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures. With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely. This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>
<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

The much upvoted comment by #gion_13 solved the issue for me:
Add ontouchstart="" to your page's body element and the :active selector will work more as expected on touch screens. Still not perfect in Chrome.

rounded corner menu item in css without CSS3!

I try to achieve the following output:
i want to achieve this with HTML and CSS. I do not want to use CSS3(as my client do not want me to!). I try the following code:
HTML:
<div class="menu">
<ul>
<li>registration</li>
<li>Contact</li>
<li>Sch's direc</li>
<li>faculty & staff</li>
<li>Campuses</li>
<li>History</li>
<li><a href="" >Mission</a><img src="images/right_menu.png" /></li>
<li style="margin:0;padding:0;"><img src="images/left_menu.png" /></li>
</ul>
</div>
CSS:
.menu ul{
list-style:none;
}
.menu li{
float:right;
background:url('images/menuBGrepX.png') repeat-x ;
margin-right:10px;
text-transform:uppercase;
}
.menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 2px;
float:left;
}
.menu li.selected{
background:#A07E4E;
}
.menu li:hover{
background:#A07E4E;
color:#313131;
}
As you can expect the background color of li is changing when some one hover over it but the left and right image which I use for give a rounded border feel, it remain same. Please help me. You can check temporary work here : http://www.examplecode.info/enam/pleasehelp/.Thanks in advance.

Use jQuery round corner plugin for cross browser round corners.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1

I'd love to know why your client asked you not to use CSS3 rounded corners? It sounds like a very short-sighted request. The only possible reason for specifying that is because certain browsers (IE6/7/8) do not support it.
In all other browsers, CSS border-radius is by far the best solution for rounded corners. All other solutions have major issues. There's a reason why the CSS3 solution is suddenly very popular, and it's because it solves all the problems that people were struggling with previously.
There are a number of solutions which allow CSS3 border-radius to be used by browsers which support it, and fall-back to Javascript for IE6/7/8. I would seriously recommend one of these solutions. The best one that I know of is CSS3Pie, but there are a number of others.

Is JavaScript allowed?
give all the elements an id, and add to the link an onMouseOver() and onMouseOut() event, where you call getElementById() on each of your borders and change them with a src="images/newimage.jpg".

In your css for hovered list element you must change the image too. For example :
.menu li:hover {
background:url('images/menuBGrepX_hover.png') repeat-x ;
color:#313131;
}
You can't change the color of the image only with CSS, you must change the image entirely.

How do I make an area unclickable with CSS?

Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.

There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;

These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/

I think this one works too:
CSS
pointer-events: none;

if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.

Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>

You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!

If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.