Hi My code in content editor web part is开发者_如何学C something like below
But I am getting description for all hyperlinks even if i mouse over on first item. Please let me know how to change the code in such a way so that it only displays the discription of the item iam hovering on. Please let me know if i am not clear.
My code from XSL:
Thanks,
It should be something like the following, but can you share your current markup?
Your example markup (given in an answer below) appears to simplify to:
<div class="divTitleLink">
<a target="_blank"> ... Link 1 </a>
</div>
<div class="divDescription">
... Description 1
</div>
<div class="divTitleLink">
<a target="_blank"> ... Link 2 </a>
</div>
<div class="divDescription">
... Description 2
</div>
<div class="divTitleLink">
<a target="_blank"> ... Link 3 </a>
</div>
<div class="divDescription">
... Description 3
</div>
The jQuery to do what you're trying to do would look something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.divTitleLink a').hover(
function () {
$(this).parents('.divTitleLink').next('.divDescription').show();
},
function () {
$(this).parents('.divTitleLink').next('.divDescription').hide();
}
);
});
</script>
Make your markup look like this :
<div class="divTitleLink">
<a>Your First link</a>
<div class="divDescription">Your First Description</div>
</div>
<div class="divTitleLink">
<a>Your Second link</a>
<div class="divDescription">Your SecondDescription</div>
</div>
...
Then, in your javascript :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').hover(
function () {
$(this).parent('div').find('.divDescription').show();
},
function () {
$(this).parent('div').find('.divDescription').hide();
}
);
});
If I guessed the markup wrong, then you can adjust it using the parent, find, children and siblings functions in jQuery.
精彩评论