Question

您好我需要帮助一些css / html

我想将鼠标悬停在图像上，然后出现另一个图像/文字，背景图像变为不透明度：0.5

<style>
        .your-img {
            width: 344px; /* your image width and height here */
            height: 857px;
            background-image: url('images/men.png');        
        }        
        .your-hover {
            width: 341px;
            height: 225px;
            opacity: 0;
            filter: alpha(opacity = 0);
            background-image: url('images/men2.png');
        align:bottom;

        }
        .your-hover:hover {           
            opacity: 0.5;
            filter: alpha(opacity = 50);
    }
        </style>


<div class="your-img">
    <div class="your-hover"></div>
</div>

这是我正在使用的代码。 men.png是主图像，men2.png是我将鼠标悬停在men.png上时应该出现的图像。

但当我将鼠标悬停在men.png上时，其不透明度为1，而悬停的图像为0.5

如何制作背景图像0.5和悬停图像1

Answer 1

如果我正确理解了这个问题，你希望将鼠标悬停在外部div上以显示内部？

你只需要为外部添加一个css规则：hover＆gt;内

.your-img:hover > .your-hover {           
     opacity: 0.5;
     filter: alpha(opacity = 50);
}

Example

Answer 2

您好，您可以简化您的代码，但只是拥有此CSS。无需创建单独的悬停div。当您应用伪类时：将鼠标悬停在.your-img类中，您需要做的就是将不透明度设置为其他背景图像。

    .your-img {
        width: 344px; /* your image width and height here */
        height: 857px;
        background-image: url('http://placehold.it/350x150');        
    }


    .your-img:hover {
        width: 341px;
        height: 225px;
        background-image: url('http://placehold.it/350x150');
        opacity: 0.5;

这是一个用来说明https://jsfiddle.net/gward90/25bcmmhb/

的小提琴

Answer 3

据我所知，目前还没有CSS只能降低背景图像的不透明度。此外，悬停必须在父母身上，因为孩子不会影响父母的造型。

棘手的部分是，如果降低父级的不透明度，孩子的不透明度也会降低。要解决这个问题，您可以使用:after并使用background: rgba()来执行以下操作：

JS Fiddle

.your-img {
  width: 344px;
  /* your image width and height here */
  height: 857px;
  background-image: url('images/men.png');
  position: relative;
}

.your-img:after {
  content: '';
  top: 0;
  bottom: 0;
  width: 100%;
  display: inline-block;
  background: rgba(0, 0, 0, 0);
  position: absolute;
}

.your-hover {
  width: 341px;
  height: 225px;
  opacity: 0;
  filter: alpha(opacity=0);
  background-image: url('images/men2.png');
  align: bottom;
  display: none;
}

.your-img:hover::after {
  background: rgba(0, 0, 0, .5);
}

.your-img:hover .your-hover {
  display: block;
  opacity: 1;
  filter: alpha(opacity=50);
}

Answer 4

您的代码有很多错误，特别是在悬停的位置。您需要将鼠标悬停在父级上。此外，在你的代码中，你试图让父母变为0.5不透明度，孩子变为1.这是不可能的，孩子在父母内部，并且它已经是0.5不透明度，因为父母是，所以你将永远不要回到1。

我已经留下了2个脚本供您在下面尝试，第一个是你的修改版本应该让悬停工作，但你会遇到上面描述的不透明度问题，第二个是修改后的html和样式给你一个如何布局的例子。

Example

    .your-img {
        width: 344px; /* your image width and height here */
        height: 857px;
        background-image: url('images/men.png');        
    }   
        .your-img:hover .your-hover{
            opacity: 0.5;
            filter: alpha(opacity = 50);
        }     
        .your-hover {
            width: 341px;
            height: 225px;
            opacity: 0;
            filter: alpha(opacity = 0);
            background-image: url('images/men2.png');
            align:bottom;
        }
</style>


<div class="your-img">
    <div class="your-hover"></div>
</div>


<style>
        .parent {
            width: 344px; /* your image width and height here */
            height: 857px;
            position: relative;
            background-image: url('images/men.png');        
        }
        .parent:hover .img-1{
            opacity: 0.5;
            filter: alpha(opacity = 50);
        } 
        .parent:hover .img-2{
            opacity: 0.5;
            filter: alpha(opacity = 50);
        }   
        .img-1 {
            background-image: url('images/men.png'); 
            position: absolute;
            height: 100%;
            width: 100%;
        }
        .img-2 {
            background-image: url('images/men2.png');
            position: absolute;
            opacity: 0;
            filter: alpha(opacity = 0);
            width: 341px;
            height: 225px;
            bottom: 0;
        }
</style>
<div class="parent">
    <div class="img-1"></div>
    <div class="img-2"></div>
</div>

将鼠标悬停在图像上并显示另一个图像

4 个答案: