我是HTML和CSS的新手,并且拥有自己的网站 问题是,当我将鼠标悬停在文本上时,我不知道如何更改不透明度。 如果我将鼠标悬停在右侧菜单中的文本上,我希望它变浅。 现在,仅当我将鼠标悬停在图像本身上时,文本才会发生变化,但是我希望它同时在同一对象上发生变化,因此我将鼠标悬停在文本上; 文字变化和图像不透明度变化。

这是我的代码:

 @import url(http://fonts.googleapis.com/css?family=Roboto:100); @import url(http://fonts.googleapis.com/css?family=Roboto:300); * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; } html, body { padding: 0; margin: 0; background-image: url(lucafraserProject/images/backgroundImage.png); background-repeat: repeat; } #container { width: 100%; height: 1000px; } #header { width: 100%; height: 200px; background-position: 50% 50%; background-color: #000; color: #FFF; font-family: 'Roboto', sans-serif; text-align: center; font-size: 45px; box-shadow: 3px 3px 5px 3px #ccc; } #aboutMe { width: 50%; height: auto; background-color: #FFF; font-family: 'Roboto', sans-serif; color: #333333; line-height: 2; margin-top: 50px; padding-top: 25px; padding-bottom: 25px; padding-left: 36px; padding-right: 36px; box-shadow: 3px 3px 5px 3px #ccc; float: left; } #footer { width: 100%; color: #333333; text-align: center; display: block; font-family: 'Roboto', sans-serif; margin-left: auto; margin-right: auto; padding-bottom: 10px; padding-top: 10px; float: left; } .aboutMe { font-size: 20px; margin-top: 0px; margin-bottom: 0px; } .h2AboutMe { font-size: 40px; padding-bottom: 1px; margin-top: 0px; margin-bottom: 0px; } .h1Header { margin-top: 0px; margin-bottom: 0px; padding-top: 40px; padding-bottom: 50px; } #menuLinks { background-color: #FFF; height: auto; width: 21%; float: left; padding: 25px 36px; overflow: hidden; font-family: 'Roboto', sans-serif; color: #333333; line-height: 2; margin: auto; padding-top: 25px; padding-bottom: 25px; padding-left: 36px; padding-right: 36px; margin-top: 50px; box-shadow: 3px 3px 5px 3px #ccc; } .h2Menu { font-size: 40px; padding-bottom: 1px; margin-top: 0px; margin-bottom: 0px; } #menuRechts { background-color: #FFF; height: auto; width: 21%; float: left; overflow: hidden; font-family: 'Roboto', sans-serif; color: #333333; line-height: 2; margin: auto; padding-top: 25px; padding-bottom: 25px; padding-left: 36px; padding-right: 36px; margin-top: 50px; box-shadow: 3px 3px 5px 3px #ccc; } li { text-decoration: none; list-style-type: none; margin-left: -40px; vertical-align: middle; margin-top: 10px; } a { text-decoration: none; list-style: none; color: #000; } a:hover { text-decoration: none; font-size: 40px; font-family: 'Roboto', sans-serif; margin-top: 0px; margin-bottom: 0px; color: #000; font-weight: bold; } #menuLinks li ul { text-decoration: none; list-style: none; } .marginClassP { margin-top: -50px; } .marginLeft { margin-left: 10px; font-size: 20px; } .mainMenu { font-size: 20px; } #widespace { width: 2%; height: 500px; float: left; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /*1210px = follow me lelijk = new css, tablet device, mobile width = */ .pic { opacity: 1; filter: alpha(opacity=100);; } .pic:hover { opacity: 0.3; filter: alpha(opacity=30); } 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>lucafraser.nl</title> <link href="indexCSS.css" rel="stylesheet" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <div id="header"> <h1 class="h1Header">Welcome</h1> </div> <div id="widespace"></div> <div id="menuLinks"> <h2 class="h2Menu">Menu</h2> <ul> <li><a href=""><span class="mainMenu">Home</span></a></li> <li><a href=""><span class="mainMenu">About</span></a></li> <li><a href=""><span class="mainMenu">Portfolio</span></a></li> <li><a href=""><span class="mainMenu">Results</span></a></li> <li><a href=""><span class="mainMenu">News</span></a></li> <li><a href=""><span class="mainMenu">Blog</span></a></li> <li><a href=""><span class="mainMenu">Contact</span></a></li> </ul> </div> <div id="widespace"></div> <div id="aboutMe"> <h2 class="h2AboutMe">Home</h2> <p class="aboutMe">I am trying to get this website to work on mobile devices. After that I will continue creating my website and I will be inserting pages with content. Also, I am trying to get the font-type I use to work for everyone so you don't see the ugly standard font-type. Thanks for your patience!<br />Update: The font is working now! I hope it's readable :D</p> </div> <div id="widespace"></div> <div id="menuRechts"> <h2 class="h2Menu">Follow me</h2> <ul> <li><img src="lucafraserProject/images/48x48/facebook-48.png" style="vertical-align:middle" class="pic"/><a href="https://www.facebook.com/luca.fraser.9" target="_blank"><span class="marginLeft">Facebook</span></a></li> <li><img src="lucafraserProject/images/48x48/twitter-48.png" style="vertical-align:middle" class="pic"/><a href="https://twitter.com/xDivooo" target="_blank"><span class="marginLeft">Twitter</span></a></li> <li><img src="lucafraserProject/images/48x48/googleplus-48.png" style="vertical-align:middle" class="pic"/><a href="https://plus.google.com/101233334966337926037/posts" target="_blank"><span class="marginLeft">Google+</span></a></li> <li><img src="lucafraserProject/images/48x48/email-48.png" style="vertical-align:middle" class="pic"/><a href="mailto:lucaf1997@gmail.com" target="_blank"><span class="marginLeft">Gmail</span></a></li> <li><img src="lucafraserProject/images/48x48/instagram-48.png" style="vertical-align:middle" class="pic"/><a href="https://instagram.com/lucafraser16" target="_blank"><span class="marginLeft">Instagram</span></a></li> <li><img src="lucafraserProject/images/48x48/youtube-48.png" style="vertical-align:middle" class="pic"/><a href="https://www.youtube.com/channel/UCUOgvY0q2C-GUOLVEhk5RbA" target="_blank"><span class="marginLeft">YouTube</span></a></li> </ul> </div> <div id="widespace"></div> <div id="footer"> <p>Copyright © Luca Fraser. Alle rechten voorbehouden.</p> </div> </div> </body> </html> 

#1楼 票数:4

正如您所提到的,您知道html和CSS,请在链接父类ul上添加类,请参见以下示例

<ul class="side-links">

然后在样式文件中使用以下CSS

.side-links li:hover{ opacity:0.3}

完成

#2楼 票数:0

悬停在a.pic时,不应用悬停效果, .pic将其悬停在其包含li元素上时将其应用。

#menuRechts li:hover .pic{
    opacity:0.3
}
#menuRechts li:hover a{
    font-weight:bold;
}

#3楼 票数:0

您总是可以使我们成为CSS伪类

img:hover{

 opacity : 0.5;
}

这会将每张图片的不透明度降低50%,您可以使用任何html元素,css类或id代替img

您可以指定0-1之间的任何值1表示总可见,0表示完全透明

#4楼 票数:0 已采纳

它应该像这个parent:hover child {opacity:0.3;}

这是代码示例

#5楼 票数:0

添加此CSS:

#menuRechts li:hover {
opacity: 0.5;

}

并删除.pic:hover代码。 这将使整个LI元素淡出,因为它既包含图像又包含文本,因此无需分别进行这两项操作。

#6楼 票数:0

Try to this code...
<!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
<img src="klematis2.jpg" width="150" height="113" alt="klematis">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for 
the :hover selector to work on other elements than the a element.</p>
</body>
</html>

  ask by Lucafraser translate from so

未解决问题?本站智能推荐:

2回复

CSS图像链接在悬停时更改不透明度

我希望在悬停时更改图像链接的不透明度。 但是,它甚至没有将图像视为链接(没有单击选项)?
2回复

仅更改所有图像的不透明度,除了悬停的图像

这是我的问题: 我在一个 div 中有几张图片,我希望当其中一张图片悬停时,所有其他图片的不透明度都会下降。 问题是我在这个 div 中也有文本,我希望当我将鼠标悬停在这个文本上时,图像的不透明度为 1。 我试图这样做: .dimImagesHover:hover img { t
2回复

在文本不受不透明度影响的地方创建图像悬停效果

我正在尝试创建图像悬停效果,但是我遇到了两个2问题之一: 文本和背景是不透明的(我只希望背景是不透明的。我希望文本保持正常。) 该图像将正确悬停并转换,但是如果我将鼠标悬停在文本上,则整个图像将返回到该图像的原始版本。 我尝试了几种不同的方法,但是我无法同时克服这两个问
3回复

悬停图像时,除了不透明度之外,我还能使用什么?

我正在尝试在图像上创建悬停效果。 当我悬停时,图像上应该会出现一点点黑暗。 为此,我尝试使用 opacity 属性,它可以工作,但感觉并没有那么好或令人印象深刻。 相反,它给人一种轻盈的感觉,这不是我想要的。 如果您想知道在图像悬停时我想要什么样的黑暗,就像这样, rgba(0,0,0,0.2) 。
1回复

如何使用css更改悬停时图像的不透明度

我试图弄清楚如何将所有图像最初设置为50% 不透明度,然后在悬停时更改为100% 不透明度。 我尝试在.css文件中设置此规则,但它给出了解析错误:
2回复

悬停的不透明度与悬停的不一样

我使用CSS':hover'规则使图像“消失”并使用不透明度更改重新出现。 我敢肯定有一个简单的代码可以实现,但是我找不到它,而且我没有经验。 我有图像A。在图像A旁边有图像B。图像B的不透明度设置为0。将鼠标悬停在图像A上时,我想将图像B的不透明度更改为1: 我为此类事情找
2回复

HTML CSS图像悬停不透明度更改,并且文本显示时也没有更改文本不透明度?

我想要它,以便当我将鼠标悬停在图像上时,文字的显示方式与我拥有文字的方式相同,只是不透明度保持不变。 示例: http : //jsfiddle.net/guineapig101/UEtLJ/ HTML: CSS:
6回复

在鼠标悬停时,更改图像的不透明度并覆盖文本

我想在鼠标悬停在缩略图图像上时删除不透明度和叠加文本。 我有几个关于如何做的想法,但我相当肯定他们效率低,笨拙。 使用文本叠加和降低的不透明度在Photoshop中制作复制图像。 鼠标悬停时将原件换成副本。 使用CSS在鼠标悬停时删除不透明度。 使用Javascript切