如何更改图像中的CSS具有以下条件的

这是影像风格：如何更改图像中的CSS具有以下条件的

.gaming{ 
background-attachment:fixed; 
background-position:center; 
background-repeat:no-repeat; 
background-size:cover; 
background-image:url("gaming.jpg"); 
height:100%; 
border:#00AEF2 3px; 
}

，这一次，因为我打算做一个悬停效果，其在变化的背景图像元素.gaming：

<section class="New-era-1 list_text" >Artificial Intelligence</section>

我试了一下

.New-era-1:hover .gaming{ 
background-image:url("just-for-fun.jpg") 
}

但没有运气。我们如何解决这个问题？

来源

2017-05-06 The Dead Legend

你在哪里游戏类在你的HTML？ –

这样的事情？ https://jsfiddle.net/dalinhuang/ppu52jbh/ –

或类似：https://jsfiddle.net/ppu52jbh/1/ @DanielH – caramba

您定位.gaming类的方式意味着与其关联的HTML元素需要位于.new-era-1<section>元素内。它应该在那之后工作。请看下图：

CSS

.gaming{ 
background-attachment:fixed; 
background-position:center; 
background-repeat:no-repeat; 
background-size:cover; 
background-image:url("http://www.alien-covenant.com/app/xalien-covenant-fill.jpg.pagespeed.ic.rPyCbS72Kx.jpg"); 
height:500px; 
width: 400px; 
border:#00AEF2 3px; 
} 
.New-era-1:hover .gaming{ 
background-image:url("https://i1.fdbimg.pl/fvpxi5v1_o6b4xt.jpg") 
}

HTML

<section class="New-era-1 list_text" >Artificial Intelligence 
<div class="gaming"></div> 
</section>

见我的jsfiddle：https://jsfiddle.net/0esrq2by/

来源

2017-05-06 14:39:40 Kellen

我需要将鼠标悬停在文本上并在后台更改图像。这就是我想要达到的效果 –

@UddeshyaSingh你想让文字位于背景图片的顶部吗？ – Kellen

另一种方法是使用jquery，改变悬停效果，像这样：

$('.new-era-1').hover(){ 
    $('.gaming').css('background-image', 'url(to-your-image.jpg)'); 
}

来源

2017-05-06 15:46:27 user14511

如何更改图像中的CSS具有以下条件的

回答

相关问题