- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将缩略图悬停时更改为带有文本的纯色背景色。
function info(){
document.getElementById('thumbnail_1').style.backgroundColor='red';
}
<article id="thumbnail_1" onmouseover="info();">
<a href=""><img src="http://placehold.it/200x100/" alt="taffies website thumbnail"></a>
</article>
function info(){
document.getElementById('thumbnail_1').style.backgroundColor='red';
}
*{
margin:0;
padding:0;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
margin:0 auto;
}
.main_title{
float:left;
padding:20px;
font-size:35px;
font-family: 'Source Sans Pro', sans-serif;
}
.main_title a{
text-decoration:none;
color:#ffffff;
}
.main_header{
background-color:#000000;
color:#ffffff;
width:100%;
height:80px;
}
.header_wrapper{
width:960px;
margin:0 auto;
}
.main_nav{
float:left;
margin-left:400px;
}
.main_nav ul li{
float:left;
padding:35px 10px;
}
.main_nav ul li a{
text-decoration:none;
color:#ffffff;
font-family:myriad pro;
}
.main_nav a:hover{
color:#ccc;
}
.main_content{
width:960px;
height:800px;
}
.main_content article{
width:260px;
height:200px;
margin:30px;
float:left;
}
.about_content{
width:960px;
height:800px;
}
.about_content article{
margin:30px;
width:500px;
}
.about_title{
font-size:30px;
margin-bottom:40px;
font-family:myriad pro;
}
.about_name{
font-size:20px;
font-weight:bold;
font-family:myriad pro;
}
.contact_content{
width:960px;
height:800px;
}
.contact_content article{
margin:30px;
width:500px;
}
.contact_title{
font-size:30px;
margin-bottom:40px;
font-family:myriad pro;
}
.about_webdev{
font-family:arial;
}
.about_email{
font-family:arial;
}
footer{
width:100%;
background-color:#000000;
color:#ffffff;
height:80px;
}
footer ul li{
float:left;
padding:30px 10px;
}
footer ul li a{
text-decoration:none;
color:#ffffff;
font-family:myriad pro;
}
footer a:hover{
color:#ccc;
}
.footer_wrapper{
width:240px;
margin:0 auto;
}
span{
font-weight:bold;
}
<header class="main_header">
<div class="header_wrapper">
<p class="main_title"><a href="index.html">title</a></p>
<nav class="main_nav">
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header> <!-- end of header -->
<div class="container">
<section class="main_content">
<article id="thumbnail_1" onmouseover="info();">
<a href=""><img src="data:image/jpeg;base64,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" alt="taffies website thumbnail"></a>
</article>
<article>
<a href=""><img src="images/fitstyle-thumbnail.png" alt="fitstyle website thumbnail"></a>
</article>
<article id="thumbnail_1" onmouseover="info();">
vbv
</article>
</section> <!-- end of section -->
</div> <!-- end of container -->
<footer>
<div class="footer_wrapper">
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</footer> <!-- end of footer -->
最佳答案
您确实应该使用 CSS :hover 选择器。例如:
#thumbnail_1 p {
display: none;
}
#thumbnail_1:hover {
background-color: red;
}
#thumbnail_1:hover p {
display: block;
}
#thumbnail_1:hover img {
visibility: hidden;
}
根本不需要使用JS
关于javascript - 尝试使缩略图在悬停时具有背景颜色和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26005287/
我正在学习和使用 jQuery,并且想要显示某些元素的删除图标。 我有一个外部主 div,其中包含许多元素的包装器。在元素包装器内部,我想当用户将鼠标悬停在元素包装器上时显示删除图标,并在用户移出元素
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我从 Qt 开始,每当有人将鼠标悬停在 QPushButton 上时,我想将 QPushButton 设置为不同的图标。到目前为止,这是我的代码: #include QPushButton *but
我从 Qt 开始,我想在有人将鼠标悬停在 QPushButton 上时将其设置为不同的图标。到目前为止,这是我的代码: #include QPushButton *button = new QPus
我有以下代码... jQuery(function($) { var timer; $('.action-viewer').hide(); $('.task').on('mouseover
我有一张照片,当用户将鼠标悬停在它上面时,我会在照片顶部显示(使用绝对定位)2 个箭头,一个用于进入上一张照片,一个用于进入下一张照片。这是到目前为止的代码... $('a.large_product
$('li > a').hover( function(){ $(this).animate({ backgroundColor: '#2a639a', color: '#fff'
我有一个悬停事件附加到几个链接,当您点击它时,会出现一个框。 有没有一种方法可以让悬停事件仅在鼠标悬停在链接上超过 500 毫秒时触发?因此,目前只要鼠标移到链接上,就会出现该框,但我希望只有当鼠标悬
我正在创建包含各种样式控件的演示应用程序。它允许我快速预览更改。 我的问题是下面的代码不起作用: Pressed button 它表示 IsPressed 的 setter 受到保护。我明白了,但我需
我正在尝试使用 js 并创建带有一些“信息文本”的“描述框” HTML google JS function info() {} 我不知道是哪个代码用一些文本创建了所谓的“描
我有一个 Accordion 风格的菜单,在悬停状态下工作正常,但我想改为点击... $(document).ready(function(){ $('#nav > li').hover(
我正在使用 Chartjs v.1.0.2 并尝试将点设置为仅在悬停在当前点上时出现。同样的问题是当我使用悬停或鼠标悬停时。可以使用 getPointsAtEvent(e); 找到当前点,但它仅在我将
我使用foreach 语句访问IEnumerable 的所有元素并将其呈现在详细信息页面中。我想让每个元素的悬停属性只影响一个元素。所以我使用 jQuery 单独影响每个元素 但是当我运行代码并将鼠标
首先提前感谢您的帮助。 案例:我在一行中有多个 div。这些 div 位于一个框中,我可以在此框中水平滚动以查看其他 div。我制作了两个按钮(L 表示左侧,R 表示右侧),以便在悬停或单击这些按钮时
我正在创建一个应用外观页面。 我希望在鼠标悬停时打开底部菜单上的其中一个按钮。 这感觉像是一项简单的任务,但我所做的一切似乎都不起作用。我错过了什么,我做了很多研究,但似乎找不到解决方案。 我尝试使用
我遇到的问题是,当您将鼠标悬停在按钮上时,只有按钮的某些部分会触发悬停/可点击状态,而不是所有实际 block 。有什么想法吗? 这是使用它的站点:http://www.revival.tv/turn
我有一位客户想要在他们的网站上实现特定功能,但我有点困惑如何做到这一点。 基本上,如果你查看他们的 existing site您可以看到 4 个圆形按钮。 他们想要的是,当有人将鼠标悬停(或单击,如果
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 9 年前。 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以
我目前正在编写我的第一个响应式网站(总的来说我是一个初学者)并且我遇到了很多障碍。其中之一是我的菜单有问题。我会尽量具体。我有一个用于桌面的水平菜单和一个用于平板电脑/手机的垂直菜单。我不知道如何解决
我正在为网站创建菜单。我正试图在链接上实现悬停 和点击 效果。我希望列表元素 a 上的悬停事件触发彩色动画并添加“事件”类。如果触发了点击和悬停事件,我想为该元素分配相同的类。问题是,一旦元素未悬停并
我是一名优秀的程序员,十分优秀!