Question

我有一个图像框，在悬停时，图像变为0.5不透明度，DIV中的文本必须从可见性：隐藏到可见性：可见＆＃39;。但我正在努力弄清楚如何去做。

＆＃13;

    #edno {
	background-image:url(" ../../CONTENT/Images/a.png");
	background-size:100%;
	background-repeat:no-repeat;	
	background-position:center;
	transition: 0.2s linear;	
    }

    #edno:hover {
	background-size:200%;
	background-position:center;
	opacity:0.5;	
    }

    #edno .imee {	
	font-family:futuraat;
	font-size:35px;
	padding-top:204px;
	visibility:hidden;
	color:black;	
    }

    #edno:hover .imee {	
	font-family:futuraat;
	font-size:35px;
	padding-top:204px;
	visibility:visible;
	color:black;	
    }

＆＃13;

    <a href="../../producti/sekcionni/1/index.html">
          <div class="figure" id="edno">
               <p class="imee">СТЪЛБИЧКА</p>
           </div>
       </a>

＆＃13;

发生的一切都是一切都在继续：

 opacity:0.5

我希望在悬停div时弹出文本。

Answer 1

我有图像框，在悬停时，图像变为0.5不透明度，DIV中的文字必须从visibility:hidden转到visibility:visible，但我正在努力弄清楚如何做它

似乎工作正常吗？文字 IS 在悬停时执行此操作。

#edno {
	background-image:url("https://placehold.it/300x150");
	background-size:100%;
	background-repeat:no-repeat;	
	background-position:center;
	transition: 0.2s linear;	
    }

    #edno:hover {
	background-size:200%;
	background-position:center;
	opacity:0.5;	
    }

    #edno .imee {	
	font-family:futuraat;
	font-size:35px;
	padding-top:204px;
	visibility:hidden;
	color:black;	
    }

    #edno:hover .imee {	
	font-family:futuraat;
	font-size:35px;
	padding-top:204px;
	visibility:visible;
	color:black;	
    }

<a href="../../producti/sekcionni/1/index.html">
          <div class="figure" id="edno">
               <p class="imee">СТЪЛБИЧКА</p>
           </div>
       </a>

Answer 2

这是一些工作代码，只需使用一个小jQuery来触发切换和VOILA！

CSS：

#edno {
    position: relative;
    margin: auto;
    background-color: red;
    width:300px;
    height: 200px;
    transition: 0.2s linear;    
    }

    #edno:hover {
    background-size:200%;
    background-position:center;
    opacity:0.5;    
    }

    .imee { 
    position: relative;
    text-align: center;
    top: -360px;
    font-family:futuraat;
    font-size:35px;
    padding-top:204px;
    display: none;
    color:black;    
    }

    .show
    {
        display: block;
    }

HTML：

      <a href="#">
          <div class="figure" id="edno"></div>
          <p id="fadeIn" class="imee">СТЪЛБИЧКА</p>
       </a>

JQUERY：

  $(document).ready(function()
        {
            $("#edno").hover(function()
            {
                $(".imee").toggleClass("show");
            });
        });

要淡出的Div元素和DIV中的<p>元素淡入

2 个答案: