CSS: when img1:hover - img2 hidden and vice versa

Question

I have two images encoded in XSL. The output method is HTML. I would like to hide the image on which :hover is not active.

XSL:

 <div id="img-col-block">
  <a target="_blank" href="{id(substring(@facs, 2))/graphic[@n='1']/@url}" id="{id(substring(@facs, 2))/graphic[@n='1']/@url}">
   <img src="{id(substring(@facs, 2))/graphic[@n='1']/@url}" id="img-col"/>
  </a>
  <a target="_blank" href="{id(substring(@facs, 2))/graphic[@n='2']/@url}" id="{id(substring(@facs, 2))/graphic[@n='2']/@url}">
   <img src="{id(substring(@facs, 2))/graphic[@n='2']/@url}" id="img-colv"/>
  </a>
 </div>

CSS:

  #img-col {height: 4%; width: 4%; border: 3px solid #fff; border-radius: 8px;  margin:  2px 5px -14px;  -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
  #img-colv {height: 4%; width: 4%; border: 2px solid orange; border-radius: 8px;  margin:  4px 0px -12px 8px; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
  #img-col:hover, #img-colv:hover {width: 97%; margin-left: 0.1%; margin-bottom: 10px; /* For Safari 3.1 to 6.0 */ transition: width 1s;}

Example of images displayed in a browser before :hover: So if :hover action is made on image "#img-col" then, image "#img-colv" must be hidden. If :hover action is made on image "#img-colv" then, image "#img-col" must be hidden.

I have tried with child selector > and {visibility: hidden} but it's not working.

In advance, thank you for your kind advice.

@GautamNaik: if I understand your question, default state of both images are displayed with `height:4%` for each, like in the print screen in my message. — Vanessa, May 02 '18 at 17:48
@A.Meshu: thank you for the useful link, however, I've tried `#img-col:hover ~ #img-colv{visibility: hidden}` following the explanation, but it is not working. What did I make wrong? — Vanessa, May 02 '18 at 18:38

Random Channel · Answer 1 · 2018-05-02T19:33:24.833

$(document).ready(function(){
    $("#img-col").hover(function(){
        $("#img-colv").css("visibility", "hidden");
        }, function(){
        $("#img-colv").css("visibility", "visible");
    });
});
$(document).ready(function(){
    $("#img-colv").hover(function(){
        $("#img-col").css("visibility", "hidden");
        }, function(){
        $("#img-col").css("visibility", "visible");
    });
});

 #img-col {height: 4%; width: 4%; border: 3px solid #fff; border-radius: 8px;  margin:  2px 5px -14px;  -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
  #img-colv {height: 4%; width: 4%; border: 2px solid orange; border-radius: 8px;  margin:  4px 0px -12px 8px; /* For Safari 3.1 to 6.0 */ transition: width 1s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="img-col-block">
  <a target="_blank" href="{id(substring(@facs, 2))/graphic[@n='1']/@url}" id="{id(substring(@facs, 2))/graphic[@n='1']/@url}">
   <img src="{id(substring(@facs, 2))/graphic[@n='1']/@url}" id="img-col"/>
  </a>
  <a target="_blank" href="{id(substring(@facs, 2))/graphic[@n='2']/@url}" id="{id(substring(@facs, 2))/graphic[@n='2']/@url}">
   <img src="{id(substring(@facs, 2))/graphic[@n='2']/@url}" id="img-colv"/>
  </a>
 </div>

This is an example, it is the jquery you must edit.

CSS: when img1:hover - img2 hidden and vice versa

1 Answers1