Question

我想要它，这样当我将鼠标悬停在图像上时，文字的显示方式与我的相同，只是它的不透明度不变。

示例：http://jsfiddle.net/guineapig101/UEtLJ/

HTML：

<a class="img1"><p class="hoverText">yoooo</p></a>

的CSS：

html,body{
width: 100%;
height: 100%;
background-color: #000;
}

p{
color: #fff;
font-size: 16px;
font-family: arial, arial black, italic;
}
.hoverText{
text-align: center;
visibility: hidden;
position: relative;
}
.img1{
position: absolute;
background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-       3.jpg');
top: 0px;
left:0px;
width: 30%;
height: 40%;
}
.img1:hover p{
visibility: visible;
z-index: 9000;
}
.img1:hover{
cursor: pointer;
opacity: 0.6;
-webkit-transition: opacity;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Answer 1

您不能影响背景图像的不透明度。您通常必须在HTML中使用实际图像，而不是纯粹用于样式目的的非语义额外元素，您可以使用像这样的伪元素来管理它。 / p>

JSfiddle

<强> CSS

html,body{
    width: 100%;
    height: 100%;
   background-color: #000;
}

p{
    color: #fff;
    font-size: 16px;
    font-family: arial, arial black, italic;
}
.hoverText{
    text-align: center;
    visibility: hidden;
    position: relative;
}

.img1:hover .hoverText{
    visibility: visible;
    cursor: pointer;
}

.img1{
    position: absolute;
    top: 0px;
    left:0px;
    width: 30%;
    height: 40%;
}
.img1:before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg');
    transition:opacity.5s ease;
}
.img1:hover:before {
    opacity:0.6;
}

Answer 2

您需要另一个元素来放置图像，以便文本不在您设置不透明度的元素内：

HTML：

<a class="img1"><span></span><p class="hoverText">yoooo</p></a>

CSS：

html,body{
    width: 100%;
    height: 100%;
   background-color: #000;
}

p{
    color: #fff;
    font-size: 16px;
    font-family: arial, arial black, italic;
}
.hoverText{
    text-align: center;
    visibility: hidden;
    position: relative;
}
.img1{
    position: absolute;
    top: 0px;
    left:0px;
    width: 30%;
    height: 40%;
    cursor: pointer;
}
.img1 span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg');
}
.img1:hover p{
    visibility: visible;
    z-index: 9000;
}
.img1:hover{
-webkit-transition: opacity;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
.img1:hover span {
    opacity: 0.6;
}

演示：http://jsfiddle.net/UEtLJ/3/

Html Css图像悬停不透明度更改和文本显示没有文本不透明度也改变？

2 个答案: