标签: hover

图像/链接的jquery onmouseover在同一位置显示div(工具提示)

我想将鼠标悬停在图像上 - >这是一个链接

在我结束时,图像应该弹出(如工具提示)一个div,我可以用一些东西填充 - 任何想法?!

$这是包含一个img的链接:我找到了图像并希望跨越图像上方的div并制作一些jquery效果,让用户获取信息,单击图像将放大

        $(this).parent().append($("<div/>")
                        .css({ "display" : "block", "left" : img.x, "top" : img.y,  
                            "width" : img.width, "heigth" : img.heigth, "border" : "1px solid red"})
                        .text("Click me!")
Run Code Online (Sandbox Code Playgroud)

不起作用: - /

jquery containers tooltip hover

0
推荐指数
1
解决办法
9561
查看次数

不能:悬停整个表格

当我将鼠标放在桌子的一个单元格上时,我想突出显示整条线!但是凭借我拥有的代码,我只能突出一个单元格!这是我的表:

<table id="myTable" class="tablesorter"> 
    <thead> 
        <tr> 
            <th>Title1</th> 
            <th>Title2</th> 
            <th>Title3</th> 
        </tr> 
    </thead> 
    <tbody>
        <tr> 
            <td>Bach</td> 
            <td>42526</td> 
            <td>Dec 10, 2002 5:14 AM</td> 
        </tr> 
        <tr> 
            <td>Doe</td> 
            <td>243155</td> 
            <td>Jan 18, 2007 9:12 AM</td> 
        </tr> 
        <tr> 
            <td>Conway</td> 
            <td>35263</td>
            <td>Jan 18, 2001 9:12 AM</td> 
        </tr> 
    </tbody> 
</table>
Run Code Online (Sandbox Code Playgroud)

和css是

   /*Table sort*/
table.tablesorter {
    font-family:arial;
    background-color: #e6EEEE;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header …
Run Code Online (Sandbox Code Playgroud)

html css html-table hover

0
推荐指数
1
解决办法
4403
查看次数

经典ASP与ASP.Net 3.5中的CSS?

使用ASP.net 1.0站点,以下内容与CSS一起使用.但我们正在将网站升级到asp 3.5,我认为CSS不再有效.这对于Active和Hover CSS是否正确?

 .BodyText
{
    font-size: 8pt;
    font-family: Arial, Sans-Serif;
    color: Black;

}
:active.BodyText
{
    font-size: 8pt;
    color: #000000;
    font-family: Arial, Sans-Serif;
    text-decoration: None;
}
:hover.BodyText
{
    font-size: 8pt;
    color: #000000;
    font-family: Arial, Sans-Serif;
    text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)

css asp.net hover visual-studio-2008

0
推荐指数
1
解决办法
539
查看次数

不要悬停JQuery

我正在使用JQuery构建一个多级(固定为3级)菜单.一切都运转良好但我想做的是让所有级别在其中任何一个被徘徊时消失.

我正在寻找这样的东西:

$('#categories AND #subcategories AND #tags').live('-NOT-mouseover', function(){
    $('#categories, #subcategories, #tags').remove();
});
Run Code Online (Sandbox Code Playgroud)

另外,我不知道如何在JQuery选择器上获取AND运算符.

jquery hover

0
推荐指数
1
解决办法
6815
查看次数

css:悬停在ul li上,不要将其悬停在ul li.dont-hover上,而不是覆盖

我想知道以下是否可能,在最后半小时搜索它时找不到它所以在这里.

我有一个无序列表

<ul>
 <li class="head">Day 1</li>
 <li>10:00</li>
 <li>12:00</li>
 <li class="head">day 2</li>
 <li>10:00</li>
 <li>14:00</li>
</ul>

<style>
ul li.head {
 background-color:green;
}
ul li:hover {
 background-color:red;
}
</style>
Run Code Online (Sandbox Code Playgroud)

现在,如果你将鼠标悬停在li.head上,它也会得到一个红色的背景.

所以我的问题是,是否有类似的东西

<style>
ul li.head {
 background-color:green;
}
ul li:hover !for li.head {
 background-color:red;
}
</style>
Run Code Online (Sandbox Code Playgroud)

我只是想知道在css中是否有这样的东西,我不是在寻找其他解决方案,这不是我的观点.

为了说清楚,我不想像它那样覆盖它

<style>
ul li.head {
 background-color:green;
}
ul li:hover {
 background-color:red;
}
ul li.head:hover {
 background-color:green;
}
</style>
Run Code Online (Sandbox Code Playgroud)

我也不想要

<style>
ul li:hover {
 background-color:red;
}
ul li.head {
 background-color:green;
}
</style>
Run Code Online (Sandbox Code Playgroud)

我只是想知道在CSS中是否有类似的东西.

注意:你可能会想到为什么你可以简单地用这个代码覆盖它,但我真的简化了这个例子.

css hover

0
推荐指数
1
解决办法
290
查看次数

在悬停一个div时更改两个元素

我想问一个我无法在任何地方找到答案的问题.我敢肯定这很简单,但是如何将这两个css句子(或函数,我不知道?)放在一起?

.key:hover p{
    color:red;
}

.key:hover {
    background-color: #999999;
}
Run Code Online (Sandbox Code Playgroud)

提前致谢.

html css hover

0
推荐指数
1
解决办法
132
查看次数

如何使用CSS类/ id来更改其他类属性?

所以我想:悬停在一个元素上,我希望悬停来改变另一个类的属性.我该怎么做?我想将鼠标悬停在一个按钮上,然后将其他div的显示更改为:block.我只使用HTML和CSS.

html css class hover

0
推荐指数
2
解决办法
2万
查看次数

在悬停另一个元素时更改SVG填充颜色

我今天一直在研究如何在悬停时更改svg填充颜色.我已经能够通过使用对象标记并链接到我的CSS文件来使其工作,以便我可以在外部设置它.但是,当我实际上将鼠标悬停在SVG上时,我只能将其工作.我在标签中有我的对象和文本标签,并希望在悬停时同时更改SVG的填充和文本标签的颜色.当我尝试从对象进一步向上定位时,它不起作用.我相信我读到对象内的SVG将无法识别任何父元素,所以我不确定这是不是问题.任何帮助,将不胜感激!下面是我的html片段.我应该指出类"icon-md"只定义了SVG的高度和宽度.

<div class="icon-button">
            <a href="#">
                <object type="image/svg+xml" class="icon-md" data="img/load-board.svg"></object><h3 class="icon-label">Load Board</h3>
            </a>
        </div>
Run Code Online (Sandbox Code Playgroud)

这也是我的SVG文件的HTML.我给了实际路径一个id"path",这就是我在外部CSS文件中专门定位的内容.

<?xml-stylesheet type="text/css" href="../stylesheets/main.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L …
Run Code Online (Sandbox Code Playgroud)

html css svg hover

0
推荐指数
1
解决办法
1万
查看次数

CSS悬停在导航栏中

我试图使用ul li制作导航栏并禁用CSS中的文本格式.代码工作得很好,因为我也为按钮做了一个小的淡入动画.如果我的导航栏中有下拉菜单,则会出现此问题.将鼠标悬停在具有下拉列表的li上也会导致下拉列表中的内容生动.

我知道可能有一些选择器你可以使用它不这样做,但到目前为止我还没有让它工作.什么是正确的做法?

这是HTML:

<nav>
    <ul>

        <a href="index.html"><li id="left">Home</li></a>
        <a href="#"><li>Menu 1</li></a>

        <li><span>Dropdown</span>
            <ul>
                <a href="#"><li>Dropdown menu 1</li></a>
                <a href="#"><li>Dropdown menu 2</li></a>
            </ul>
        </li>

        <a href="#"><li>Menu 3</li></a>
        <a href="#"><li id="right">Contact me</li></a>

    </ul>

</nav>
Run Code Online (Sandbox Code Playgroud)

这是CSS:

nav{
  display: inline;
  float: left;
  background-color: #d48041;
  box-shadow: 0 1vh 2vh -0.5vh #F2B57B inset;
  width:90%;
  padding-left:10%;
  height:5%;
  font-weight: bold;
}

nav ul{
  list-style: none;
  margin:0;
  padding:0;
  display: inline;
}

nav ul a{
  text-decoration: none;
  color: black;
  font-size: 1.5vh;
}

nav ul a li{
  display:inline-block;
  float:left;
  text-align: …
Run Code Online (Sandbox Code Playgroud)

html css hover css-selectors drop-down-menu

0
推荐指数
1
解决办法
3362
查看次数

在Bootstrap 4.1中悬停下拉列表

我有一个网站,我使用Bootstrap 4.1创建了下拉列表.此时,下拉列表正在点击.

我用来创建下拉列表的HTML代码是:

<div class="collapse navbar-collapse text-center" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">

        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      main menu
    </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">A</a>
                <a class="dropdown-item" href="#">B</a>
                <a class="dropdown-item" href="#">C</a>
                <a class="dropdown-item" href="#">D</a>
            </div>
        </li>

        <button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>

    </ul>
 </div>
Run Code Online (Sandbox Code Playgroud)


问题陈述:

我想知道我应该在上面的代码中做出哪些更改,以便我可以在悬停时看到下拉项(A,B,C,D).

html css hover drop-down-menu bootstrap-4

0
推荐指数
1
解决办法
5654
查看次数