CSS Pseudo类在Sharepoint Web部件中不起作用. [英] CSS Pseudo class doesn't work in Sharepoint web part.

问题描述

我想为背景图像设置不同的不透明度 当鼠标悬停时.

I want to set different opacity of background images  when mouse over and out.

以下代码可独立运行.但是，当我将其添加到Sharepoint Web部件时，一些css生效了，但是图像不会显示.

The following code works independently. However when I added it to the Sharepoint web part, some css took effect, but the images won't show. 

我不知道是什么影响了伪类.

I cannot figure out what affect the pseudo class.

    
<div class="a x" >Text...</div>
<div class="b x">Text...</div>
<div style='clear:both'></div>
<div class="x">Text...</div>
<div class="x">Text...</div>

<style>
div.x{
width: 125px;
height: 125px;
display: block;
float:left;
margin:10px;
}

div.x::after{
  content: "";
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;   
}

div.x:hover::after {
    opacity: 0.5;
}

div.a::after {
  background: url(1.png);
}
div.b::after {
  background: url(2.png);
}

</style>

推荐答案

Icha，

您可以使用简单的Java脚本来完成此操作，

You can do this with plain java-script,

假设图片ID为IMGid，并且在鼠标悬停时可以更改不透明度

Lets say the image ID is IMGid and on mouse hover you can change the opacity

var element = document.getElementById('IMGid');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; 

引用此链接:
https://stackoverflow.com/questions/18669259/change-opacity-on-hover

Ref to this link:
https://stackoverflow.com/questions/18669259/change-opacity-on-hover

这篇关于CSS Pseudo类在Sharepoint Web部件中不起作用.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！