replaceWith(); JQuery function

Question

I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:

<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>

With:

<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>

When hovering on a separate div class of:

<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>

I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.

For the JQ, I'm using the following:

<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>

I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.

I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!

Answer 1

try this:

$('.item.two').hover(function(){
    $('.content.one').replaceWith($('.content.two'));
});

Answer 2

You have two classes on the same element in both cases, so your selectors should be:

.item.one
.item.two
.content.two
.content.two