Question

终于找到了结果，同时使用js和css来工作，   多谢你们：）   的 FINAL JSFIDDLE CODE

查找以下代码

我已经使用其他代码做了一个示例，显示'info <DIV>'以便在鼠标悬停在图像上时显示，但是当我尝试在图像上显示"caption <DIV>"时遇到问题。我试图在css中添加代码，但我做的任何事情都会停止显示"info <DIV>" :(

可以请一些人查看这组代码：jsfiddle

如果"info <DIV>"可以在单独的<div>中显示，那将会很有帮助。谢谢问候。

代码html

<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/>

<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div>

<div class="caption">SYMBOL</div> 

<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/>

<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>

<div class="caption">STAR</div>

CSS代码

.team , .info{
 background: #151515;
 height: 150px;
 width: 150px; 

}
.info{

    background:white;
    height: 50%;
    width: 20%;
    display:none;
position: absolute; 
    top: 10px;
    right: 10px;
}


.team:hover + .info {

   display:block; }


.team {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .team:hover {
      opacity: 0.5;
      }

Answer 1

令人难以置信的是CSS能做什么 - 但不要过多地滥用它。我已经看到一些非常奇特的小部件和模板完全在CSS中完成（这很棒）但是我建议在你＆＃34; hack＆＃34;时要小心。 CSS与使用javascript。恕我直言这是一个css hack：

.team:hover + .info {
  display:block;
}

可以使用CSS来更改该元素中NESTED元素的样式/显示，例如：

<div>
  <a class="close" href="#">Close me</a>
</div>

当您将鼠标悬停在<div上时，a.close应显示（display：block;）。

在您的具体情况下 - 您正在使用css来更改NON-NESTED元素的显示。建议使用javascript而不是css hack，因为如果您曾经（并且很可能会）想让用户将鼠标移离图片并将鼠标悬停在标题div上并突出显示文本，请单击链接...等你将必须使用javascript。 CSS的功能有限，当你使用超出预期目的的超越时，它的复杂性会大大增加。

因此，我推荐使用javascript（带有jquery或其他库）。

Answer 2

我在css中添加了标题类并设置了标题样式。在您的代码中，标题将保留在图像下方。然后我设置position:relative并从底部设置20px的位置。我给了它一个background-color:red，以便让你看到它的位置。我还给标题宽度为150像素作为图像的宽度。您使用了类team，info和caption。为了在每个图像中单独定位鼠标悬停功能，我为每个图像创建了2种不同类别，因此：team1，team2，info1，info2，{{ 1}}，caption1。如果您想在网页上使用3张图片，则必须在html，css和jquery函数中添加caption2，team3，info3等。（您只需复制，粘贴和重命名）。我添加了一个id为caption3的父div，它包装了每个图像并给出了相对定位。您可以根据需要编辑代码。

以下是经过编辑的HTML：

image

这是编辑过的CSS：

<div id="image">
 <img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-  Critical-icon.png" class="team1"/>

<div class="info1">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"    <BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"    <BR>"this is a symbol"<BR></div>

<div class="caption1">SYMBOL</div> 
</div>
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-    Favourite-1-icon.png" alt="" class="team2"/>

<div class="info2">and this is a star<BR>and this is a star<BR>and this is a    star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>

<div class="caption2">STAR</div>
</div>

然后我添加了一些jquery函数，你可以在其他html代码之后放入html页面的主体：

.team1 {
 background: #151515;
 height: 150px;
 width: 150px;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;

}

.info1{
background: white;
 height: 150px;
 width: 150px;
 visibility:hidden;
 position: absolute; 
 top: 10px;
 right: 10px;
}

.team2{
 background: #151515;
 height: 150px;
 width: 150px;
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;    

}

.info2 {
background: white;
 height: 150px;
 width: 150px;
 visibility:hidden;
 position: absolute; 
 top: 10px;
 right: 10px;
}

.team1:hover {
      opacity: 0.5;
}

.team2:hover {
      opacity: 0.5;
}

.caption1  {
position:relative;
    background-color:red;
    width:150px;
    bottom:20px;
    visibility:hidden;
}

.caption2  {
position:relative;
    background-color:red;
    width:150px;
    bottom:20px;
    visibility:hidden;
}

#image {
position:relative;
}

要使用jquery函数，您必须在页面的头部插入：$(".team1").mouseout(function () { $(".caption1").css("visibility","hidden"); $(".info1").css("visibility","hidden"); }); $(".team1").mouseover(function () { $(".caption1").css("visibility","visible"); $(".info1").css("visibility","visible"); }); $(".team2").mouseout(function () { $(".caption2").css("visibility","hidden"); $(".info2").css("visibility","hidden"); }); $(".team2").mouseover(function () { $(".caption2").css("visibility","visible"); $(".info2").css("visibility","visible"); });，在页面中包含jquery库，如下所示：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

以下是jsfiddle

的演示

Answer 3

最终代码

HTML

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>



  <style type='text/css'>

      .team img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;

}
.team .caption {
    position: absolute;
    bottom: 1px;
    right: 0px;
    width: 100%;
    height: 25%;
    display: none;
    z-index: 2;
    text-align: right;
    color: #ffffff;
    padding: 10px;
    background: rgba(0, 0, 0, .75);

}

.team .caption a {
    color: #ffffff;
}
  </style>




<body>
  <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').mouseover(function() {
    $(this).find('.caption').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.caption').fadeOut(100);
});
});//]]>  

</script>
      <script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('.team').hover(function() {
    $(this).find('.info').fadeIn(100);
});

$('.team').mouseleave(function() {
    $(this).find('.info').fadeOut(100);
});
});//]]>  

</script>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >

<div class="caption">SYMBOL</div>

<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div></div>

<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">

<div class="caption">STAR</div>

<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div></div>

</body>

CSS

.team {
 background: #151515;
 height: 150px;
 width: 150px; 
    position: relative;

}
.info{
    background:white;
    height: 100%;
    width: 100%;
    display:none;
position:fixed;
    float:right;
    top: 0px;
    left: 70% ;
    z-index: 99;
}

在图像鼠标悬停上显示两个div

3 个答案: