CSS：当img1：hover - img2隐藏，反之亦然

Question

我有XSL编码的两个图像。输出方法是HTML。我想隐藏:hover无效的图片。

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;}

:hover之前在浏览器中显示的图片示例： 因此，如果对图像进行了:hover操作＆＃34;＃img-col＆＃34;然后，图像＆＃34;＃img-colv＆＃34;必须隐藏。如果:hover对图片进行了操作＆＃34;＃img-colv＆＃34;然后，图像＆＃34;＃img-col＆＃34;必须隐藏。

我尝试使用子选择器>和{visibility: hidden}，但它无效。

提前感谢您的善意。

Answer 1

C:\ColdFusion2016\cfusion\runtime\conf\web.xml

$(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;}

这是一个例子，它是你必须编辑的jquery。