<p>I am trying to create a rather simple effect on a set of images.  When an image doesn't have the mouse over it, I'd like it to have a simple, gray border.  When it does have an image over it, I'd like it to have a different, "selected", border.</p>

<p>The following CSS works great in Firefox:</p>

<pre class="lang-css prettyprint-override"><code>.myImage a img
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a:hover img
{
    border: 3px solid blue;
    padding: 1px;
}
</code></pre>

<p>However, in IE, borders do not appear when the mouse isn't hovered over the image.  My Google-fu tells me there is a bug in IE that is causing this problem.  Unfortunately, I can't seem to locate a way to fix that bug.</p>

[{'answer_id': 64025, 'author': 'hjdivad', 'author_id': 7538, 'author_profile': 'https://Stackoverflow.com/users/7538', 'pm_score': 2, 'selected': True, 'text': "<p>Try using a different colour.  I'm not sure IE understands 'grey' (instead, use 'gray').</p>\n"}, {'answer_id': 64098, 'author': 'Eric  DeLabar', 'author_id': 7556, 'author_profile': 'https://Stackoverflow.com/users/7556', 'pm_score': 0, 'selected': False, 'text': '<p>IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself.  So, if you added a class like "image" to your anchor and altered your markup to something like this:</p>\n\n<pre><code>&lt;div class="myImage"&gt;&lt;a href="..." class="image"&gt;&lt;img .../&gt;&lt;/a&gt;&lt;/div&gt;\n</code></pre>\n\n<p>You could then alter your CSS to look like this:</p>\n\n<pre class="lang-css prettyprint-override"><code>.myImage a.image\n{\n    border: 1px solid grey;\n    padding: 3px;\n}\n.myImage a.image:hover\n{\n    border: 3px solid blue;\n    padding: 1px;\n}\n</code></pre>\n\n<p>Which should mimic the desired effect by placing the border on the anchor instead of the image.  Just as a note, you may need something like the following in your CSS to eliminate the image\'s default border:</p>\n\n<pre class="lang-css prettyprint-override"><code>.myImage a img {\n    border: none;\n}\n</code></pre>\n'}, {'answer_id': 64134, 'author': 'Mr. Shiny and New 安宇', 'author_id': 7867, 'author_profile': 'https://Stackoverflow.com/users/7867', 'pm_score': 1, 'selected': False, 'text': '<p>The following works in IE7, IE6, and FF3.  The key was to use a:link:hover.  IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.</p>\n\n<p>Note that it\'s in Standards mode.  Dont\' know what would happen in quirks mode.</p>\n\n<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;&lt;/title&gt;\n    &lt;style type="text/css"&gt;\n      a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }\n      .myImage a\n      {\n          float: left;\n          clear: both;\n          border: 0;\n          margin: 3px;\n          padding: 1px;\n      }\n      .myImage a:link:hover\n      {\n          float: left;\n          clear: both;\n          border: 3px solid blue;\n          padding: 1px;\n          margin: 0;\n          display:block;\n      }\n    &lt;/style&gt;\n  &lt;/head&gt;\n  &lt;body&gt;\n    &lt;div class="myImage"&gt;&lt;a href="#"&gt;&lt;img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;&lt;/a&gt;&lt;/div&gt;\n    &lt;div class="myImage"&gt;&lt;a href="#"&gt;&lt;img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;&lt;/a&gt;&lt;/div&gt;\n  &lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 64149, 'author': 'Drejc', 'author_id': 6482, 'author_profile': 'https://Stackoverflow.com/users/6482', 'pm_score': 0, 'selected': False, 'text': '<p>Try using the <em>background</em> instead of the <em>border</em>.</p>\n\n<p>It is not the same but it works in IE (take a look at the menu on my site: <a href="http://www.monex-finance.net/ENG/index.php" rel="nofollow noreferrer">www.monex-finance.net</a>).</p>\n'}, {'answer_id': 64150, 'author': 'Jamie', 'author_id': 8391, 'author_profile': 'https://Stackoverflow.com/users/8391', 'pm_score': 1, 'selected': False, 'text': '<p>In my experience IE doesn\'t work well with pseudo-classes.  I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.</p>\n\n<p>CSS:</p>\n\n<pre class="lang-css prettyprint-override"><code>.standard_border\n{\n    border: 1px solid grey;\n    padding: 3px;\n}\n.hover_border\n{\n    border: 3px solid blue;\n    padding: 1px;\n}\n</code></pre>\n\n<p>Inline Javascript:</p>\n\n<pre><code>&lt;img src="image.jpg" alt="" class="standard_border" onmouseover="this.className=\'hover_border\'" onmouseout="this.className=\'standard_border\'" /&gt;\n</code></pre>\n'}, {'answer_id': 64178, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<pre><code>&lt;!--[if lt IE 7]&gt;\n&lt;script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"&gt;&lt;/script&gt;\n&lt;![endif]--&gt;\n</code></pre>\n\n<p>put that in your header, should fix some of the ie bugs.</p>\n'}]
['https://Stackoverflow.com/questions/63885', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/7357/']