/    Sign up×
Community /Pin to ProfileBookmark

Removing css hover class over specific images

this block of code is the center main image on the homepage which should have and does have a hover effect on mouseover:
<div id=”centeredimage”>
<style type=”text/css”>
img{opacity:0.35;filter:alpha(opacity=35);}
img:hover{opacity:1.0;filter:alpha(opacity=100);}
</style>
<img src=”Center Image HomePage.jpg” height=”412″ width=”458″ />
</div>

the following code is for what goes on the left and right of the center image:
<div id=”leftdisplaycolumn”>
<div class=”innertube”>
<img src=”U:Web Dev – M&A RemovalsLeftSideDisplayDimensions.bmp” width=”190″ height=”150″ />
</div>
<div class=”innertube”>
<img src=”U:Web Dev – M&A RemovalsLeftSideDisplayDimensions.bmp” width=”190″ height=”150″ />
</div>
<div class=”innertube”>
<img src=”U:Web Dev – M&A RemovalsLeftSideDisplayDimensions.bmp” width=”190″ height=”150″ />
</div>
<div class=”innertube”>
<img src=”U:Web Dev – M&A RemovalsLeftSideDisplayDimensions.bmp” width=”190″ height=”150″ />
</div>
</div>
<div id=”rightdisplaycolumn”>
<div class=”innertube”>
<img src=” ” width=”190″ height=”150″ />
</div>
<div class=”innertube”>
<img src=” ” width=”190″ height=”150″ />
</div>
<div class=”innertube”>
<img src=” ” width=”190″ height=”150″ />
</div>
<div class=”innertube”>
<img src=” ” width=”190″ height=”150″ />
</div>
</div>
the issue is that the images in the leftdisplaycolumn and rightdisplaycolumn div should not have any hover effect. I tried using jQuery to remove the effect but it removes the image as a whole.
the jquery code being used was placed within the innertube class as follows:

<div class=”innertube”>
<script>$(this).removeClass(“hover”);
<img src=”U:Web Dev – M&A RemovalsLeftSideDisplayDimensions.bmp” width=”190″ height=”150″ />
</script>
</div>

gathered from: [url]http://api.jquery.com/removeClass/[/url]

I want the image but without the hover class effect can anyone help or point me in the right direction.

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@html-tutorialsDec 16.2011 — Why not give the main image a unique ID, and then only assign this style to that ID?

<i>
</i>&lt;style type="text/css"&gt;
img#unique {opacity:0.35;filter:alpha(opacity=35);}
img#unique:hover{opacity:1.0;filter:alpha(opacity=100);}
&lt;/style&gt;
&lt;img id = "unique" src="Center Image HomePage.jpg" height="412" width="458" /&gt;


?
Copy linkTweet thisAlerts:
@nsathauthorDec 16.2011 — o yeh Cheers thanks work perfectly
×

Success!

Help @nsath spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...