seo Question posted in
Some basic information to get you started with this can be found here.

How to hide image when hovering on a link in a different div – SEO

I have looked all over for this and I can’t seem to figure it out. I have a list of links that show an image when hovering over each one. I also have a default image in that same place holder when no links are being hovered over. How do I make that default image disappear when the links showing their images. I don’t want to use backgrounds to cover the default image.

https://jsfiddle.net/76tnfh96/2/

HTML:

<div class="links">
<p class="default_img"><a><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></a></p>
        <ul id="over" class="links">
                <li><a>Link 1<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
                <li><a>Link 2<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
                <li><a>Link 3<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
        </ul>
</div>

CSS:

<style type="text/css">

.links .default_img a {
  top:100px;
    float:right;
  width:100px;
  height:100px;
    background:#000000;
    position:absolute;
  display:none;
}
/*Link position*/
ul.links {
    list-style:none;
    padding:0;
    width:100px;
}
.links li {
    width:200px;
    color:#000000;
}

/*Hover Image Position/transition out*/
.links li a span, .links li a b {
    position:absolute;
    right:8px;
    top:-999em;
    display: none;
}

.links li a:hover span {
    top:24px;
    display: block;
}

</style>
Tags:

3

Answers


  1. 0

    With jquery:

    $("li a").mouseenter(function() {
  $(".default_img").eq(0).hide();
});

$("li a").mouseleave(function() {
  $(".default_img").eq(0).show();
});
    Login or Signup to reply.
  2. 0

    Just changed a couple of things so you don’t have to use jQuery/javascript. To be able to hover action another non dependent element you would need javascript as that would be called a disjointed rollover. 

            <ul id="over" class="links">
                <li><a>Link 1<span><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></span></a></li>    
                <li><a>Link 2<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
                <li><a>Link 3<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
                <li><a>Link 4<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
        </ul>
</div> 



 <style type="text/css">

/*Link position*/
ul.links {
    list-style:none;
    padding:0;
    width:100px;
}
.links li {
    width:200px;
    color:#000000;
}

/*Hover Image Position/transition out*/

.links li a span {
    position:absolute;
    left:200px;
    display: none;
}
.links li a span img {
    width: 100px; height:100px;
}
.links li a:hover span {
    top:24px;
    display: block;
  background: none;
}
.links li:first-of-type a span, .links li:first-of-type a:hover span{
  display:block;
  background: url(http://thedeskdoctors.com/Images/LifePreserver.jpg) no-repeat 0 0;
}
</style>

    Changed image sizes just so it would fit in view while testing.

    Login or Signup to reply.
  3. 0

    You can leave your whole Markup like what you already had, and add this JavaScript code to your page. You do not need to add any frameworks, and this runs on all browsers.

    var links = document.querySelectorAll("#over a");

[].forEach.call(links, function(value) {

  var default_image = document.querySelector(".links .default_img a");

  value.addEventListener("mouseover", function(){
   default_image.classList.add("hidden");
  });

  value.addEventListener("mouseleave", function(){
   default_image.className = default_image.className.replace(/hiddenb/,'');
  });
});

    Example

    (The example might lag a bit because your CSS moves your images like wild)

    Example 2

    (Moved the images for better testing purposes)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search