我在object标签中包含了一个SVG图像文件,如下所示:
<object type="image/svg+xml" data="linkto/image.svg">
<!-- fallback image in CSS -->
</object>
有问题的图像是一张世界地图,我想fill在鼠标悬停在a上时转换属性group,在这种情况下我按大陆分组我的SVG,所以南美看起来像这样:
<g id="south_america">
<path fill="#FAFAFA" d="(edited for brevity)"/>
</g>
我可以fill通过在SVG文档顶部使用以下CSS来使属性在悬停时更改:
<style>
#south_america path {
transition: fill .4s ease;
}
#south_america:hover path {
fill:white;
}
</style>
但是我无法通过fillCSS过渡使颜色渐渐消失,颜色会立即改变,有人可以对此有所了解吗？
我想知道如何在悬停时制作旋转或旋转的图像.我想知道如何使用CSS在以下代码上模拟该功能:
img {
border-radius: 50%;
}<img src="http://i.imgur.com/3DWAbmN.jpg" />我有一个下拉菜单.现在当它下滑到多个级别时,我希望在它消失之前添加等待时间为2秒,这样用户可以在.hover()错误打破时重新进入状态.
可能吗？
我的幻灯片代码:
$('.icon').hover(function() {
$('li.icon > ul').slideDown('fast');
}, function() {
$('li.icon > ul').slideUp('fast');
});
我有以下HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
在CSS中,我想将a:hover这些菜单项设置为特定颜色.所以我写道:
.menu a:hover
{
color:#DDD;
}
但是,我想a:hover仅为<a>具有类main-nav-item而不是main-nav-item-current的标签设置此颜色,因为它具有不同的颜色,并且在悬停时不应更改.菜单 div中的所有<a>标记都应在悬停时更改颜色,但当前类的标记除外.
我怎么能用CSS做呢？
我试过类似的东西
.menu a:hover .main-nav-item
{
color:#DDD;
}
认为只有具有main-nav-item类的那些将在悬停时改变颜色,而不是当前的颜色.但它没有用.
我希望它像这样简单,但我知道它不是:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
因此,当您将鼠标悬停在img上时,它会将#thisElement的不透明度更改为30%,并将图像的不透明度更改为100%.有没有办法只使用css实际做到这一点？
所以这是HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div> …我有一个<div>,我想在悬停时切换它的类.
这是我的代码:
function a(){
this.classList.toggle('first');
this.classList.toggle('sec');
}
document.querySelector('#container').addEventListener('click', a );
我知道我的HTML或CSS没有问题.只是我必须改变并放置一些东西click,但我不知道是什么.
请帮忙!!
是否可以阻止Bootstrap轮播暂停鼠标悬停行为并继续自动循环浏览项目？
文档仅提到默认行为pause: "hover",如果我将pause参数更改为其他任何内容,则轮播将完全停止工作,因此我不确定如何禁用此默认行为.
该CSS3 DOC hover和:关于会谈的焦点,这似乎完全一样的我.两者有什么不同？我没看到什么？
谢谢!
我见过这个jQuery语法:
if($(element).is(':hover')) { do something}
由于我不使用jQuery,我正在寻找在纯JavaScript中执行此操作的最佳方法.
我知道我可以保持一个全局变量,设置/它通过取消设置mouseover和mouseout,但我不知道是否有某种方式通过DOM,而不是检查元素的本地属性？也许是这样的:
if(element.style.className.hovered === true) {do something}
此外,它必须是跨浏览器兼容的.
在我的脚本中有三个div.class="ab"当我将鼠标悬停在第一行并显示div时class="abc",我想显示div ,当悬停在第二行时.否则我想class="a"默认显示div .
但它永远不会显示div class="a".
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>这是我的问题JSFiddle:JSFiddle Link