Jayzon wrote:
: <div class="memberarea">
: <div class="memberpic">
: <a href="#">
: <img src="the_image.jpg" alt="Mr. X" title="Mr. X" />
: </a>
: </div>
: <div class="memberinfo">
: <h4>Mister X</h4>
: <p>Info 1</p>
: <p>Info 2</p>
: <p>Info 3</p>
: <a href="##" class="email">[EMAIL PROTECTED]</a>
: </div>
: </div>
[snip]
: I tried to do this with the following code:
:
: $(document).ready(function(){
: $("a.email").hover(
: function () {
: $(this).prev("a").css({"margin-left":"-210px"});
: },
: function () {
: $(this).prev("a").css({"margin-left":"-210px"}).remove();
: }
: );
: });
:
[snip]
: Since I'm totally new to jQuery, I tried to copy/paste the code from
: the documentation and fit it to my needs. This didn't work out & I
: have no idea how to achieve the desired effect.
According to the docs, .remove() is used to "remove all matched
elements from the DOM." CSS is not an element. It is a style. So you
cannot use .remove() to remove a style.
There are two problems with your example. First, there is no "email"
class in the markup. So there will never be a match as you have the
selector ("a.email") written above. Also, there is only one anchor
element in the document. There is no anchor previous to the anchor
selected. So I assume you are looking for a hover over the image.
This worked in my tests:
$(document).ready(function(){
$( '.memberpic > a > img' ).hover(
function () {
$(this).parent().css( 'margin-left', '-210px' );
},
function () {
$(this).parent().css( 'margin-left', '' );
}
);
});
I could have used a shorter selector ('memberpic img'), but the
selector above indicates which element is the parent of the img element.
Note that if your image is 210 pixels or less then the second function
will be triggered as the image moves to the left.
A simpler approach might be to select the anchor in the first place.
The :has() selector comes in handy here. This allows future expansion
of the div with additional text without breaking this selector.
$( '.memberpic a:has(img)' ).hover(
function () {
$(this).css( 'margin-left', '-210px' );
},
function () {
$(this).css( 'margin-left', '' );
}
);
HTH,
Charles K. Clarkson
--
Mobile Homes Specialist
Free Market Advocate
Web Programmer
254 968-8328
http://www.clarksonenergyhomes.com/wordpress/about/
