onmouseover 相关问题

OnMouseOver是一个事件，当用户将鼠标光标放在控件上时，它会在GUI框架中触发。

在 WordPress 中从静态图像更改为悬停或鼠标悬停时的 Google 地图

我想要一个静态图像，当鼠标悬停或悬停时该图像会被 Google 地图替换。我正在尝试使用插件悬停图像，但我认为你不能在那里使用谷歌地图代码，因为......

php wordpress image google-maps onmouseover

回答 1 投票 0

在网站 https://florianwmueller.com/work-alternative/ （测试页）上，我有几张带有 .no-cursor 类的图像。然后我有下面这个小JavaScript： var 元素 = do...</desc> <question vote="-1"> <p>在网站上<a href="https://florianwmueller.com/work-alternative/" rel="nofollow noreferrer">https://florianwmueller.com/work-alternative/</a>（测试页）我有几张带有.no-cursor类的图像。然后我有下面这个小 JavaScript：</p> <pre><code><script> var elements = document.getElementsByClassName("no-cursor"); var style; for (var i = 0; i < elements.length; i++) { elements[i].addEventListener("mouseover", function() { style = document.createElement("style"); style.innerHTML = "body.cursor-element-shape a { cursor: none !important; } .wpcc-active > .wpcc-cursor { display: none !important; }"; document.head.appendChild(style); }); elements[i].addEventListener("mouseleave", function() { document.head.removeChild(style); }); } </script> </code></pre> <p>此脚本的目标是防止鼠标指针悬停在相应图像上时可见。到目前为止，此功能运行良好，但在更新插件“自定义光标”后，它不再起作用。你能告诉我为什么吗？该脚本的目标是防止任何鼠标指针在悬停相应图像（以及自定义光标）时可见。到目前为止，这种方法还很有效，但突然间就不再有效了。有人有什么想法吗？</p> </question> <answer tick="false" vote="0"> <p>你可以使用CSS来实现它，如下所示：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.no-cursor{ cursor:none; /*Setting the cursor to be invisible*/ }</code></pre> <pre><code><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico" alt="image" class="no-cursor"></code></pre> </div> </div> <p></p> <p>如果它仍然显示，则意味着某些东西正在覆盖它，在这种情况下，在无之后添加 <pre><code>!important</code></pre> </p> </answer></body>

javascript onmouseover mousehover

回答 0 投票 0

在 JSX 中悬停时更改图像

如何在 JSX 中更改悬停时的图像我正在尝试这样的事情：如何更改 JSX 中 hover 上的图像我正在尝试这样的事情： <img src={require('../../../common/assets/network-inactive.png')} onMouseOver={this.src = require('../../../common/assets/network.png')} onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} /> 我假设您正在 React 组件中编写此代码。如： class Welcome extends React.Component { render() { return ( <img src={require('../../../common/assets/network-inactive.png')} onMouseOver={this.src = require('../../../common/assets/network.png')} onMouseOut={this.src = require('../../../common/assets/network-inactive.png')} /> ); } } 在这种情况下，定位this.src将不起作用，因为您本质上是在班级中寻找名为src的内容。例如 this.src 可以找到这样的东西： src = () => (alert("a source")) 但这不是您想要做的。您想要定位图像本身。因此您需要进入<img />上下文。你可以像这样轻松做到这一点： <img onMouseOver={e => console.log(e)} /> 从那里您可以定位 currentTarget 属性等。这将进入您的元素的上下文。所以现在你可以做这样的事情： <img src="img1" onMouseOver={e => (e.currentTarget.src = "img2")} /> 对于onMouseOut也可以做同样的事情。您可以对其他元素使用相同的方法，因为您肯定需要再次执行此操作。但要小心，因为这不是唯一的解决方案。在更大的项目中，您可能需要考虑使用存储（Redux），并传递 props 而不是改变元素。最好是在州内管理： class App extends Component { state = { img: "https://i.vimeocdn.com/portrait/58832_300x300" } render() { return ( <div style={styles}> <img src={this.state.img} onMouseEnter={() => { this.setState({ img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png" }) }} onMouseOut={() => { this.setState({ img: "https://i.vimeocdn.com/portrait/58832_300x300" }) }} /> </div> ) } }; https://codesandbox.io/s/5437qm907l 另一种非类方法： import arrow from "../images/arrow.svg"; import arrowHover from "../images/arrowHover.svg"; function Arrow() { const [over, setOver] = useState(false); return ( <div onMouseOver={() => setOver(true)} onMouseOut={() => setOver(false)} > <img src={over ? arrowHover : arrow} alt="arrow" width="50" height="50" /> </div> ) } 这是使用函数组件和打字稿的非类方法： interface IconProps { src?: string; srcOnHover?: string; alt?: string; } const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => ( <img src={src} alt={alt} onMouseOver={(e): void => { srcOnHover && (e.currentTarget.src = srcOnHover); }} onMouseOut={(e): void => { srcOnHover && (e.currentTarget.src = src || ''); }} /> ); 可以这样使用： <Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" /> 这里是一个在 React 中使用 onMouseEnter 和 onMouseLeave 处理图像 src 的好方法。贡献这个非基于类的组件版本。 import React, { useState } from 'react'; function imageHoveControl({) { let imageVar = { nonhovered: '/public/image.jpg' hovered: '/public/imageHover.jpg' } let selectorDown = imageVar.nonhovered.src let selectorUp = imageVar.hovered.src //Pop "up" to meet cursor on hover const [selectorImage, setSelectorImage] = useState(selectorDown); function handleMouseEnter() { setSelectorImage(selectorUp) } function handleMouseLeave() { setSelectorImage(selectorDown) } return ( <img className="rounded-full h-14 w-14 sm:h-20 sm:w-20 bg-contain mx-1" src={selectorImage} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} /> ) } 简单的方法：类 Home 扩展了 React.Component { 状态={ 图标：ICON_ONE } 渲染（）{ 返回（ this.setState({icon:ICON_TWO})} onMouseOut={() => this.setState({ 图标: ICON_ONE })} /> ） }

javascript reactjs jsx onmouseover onmouseout

回答 6 投票 0

如何正确运行鼠标悬停[关闭]

console.log("正在初始化..."); document.querySelector(".about-arrow").addEventListener("click",()=>{ document.querySelector(".about").style.zIndex='1...

javascript html css mouseover onmouseover

回答 1 投票 0

通过 JavaScript 或 jQuery 控制 CSS

我正在寻找一种方法来控制悬停时特定项目的CSS。由于它不是直接位于父系中的元素，因此我无法使用 CSS。我正在寻找一种方法来控制悬停时特定项目的 CSS。由于它不是直接位于父系中的元素，因此我无法使用 CSS。 <article class="portfolio-item web"> <a data-rel="prettyPhoto" href="http://vimeo.com/34266952"> <img src="http://localhost/wordpress/wp-content/themes/.../images/portfolio/introspection.jpg" alt=""> <span class="genericBeaconIsotope"> <span class="beaconContainer"> <span class="beaconBar"></span> <span class="beaconCircle1"></span> <span class="beaconCircle2"></span> <span class="beaconText">Introspection</span> </span> </span> </a> </article> 我试图将鼠标悬停在 beaconContainer 上并使图像受到影响。它的功能应该类似于翻转。这是我试图在 CSS 中实现的目标： -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; transition: all 1s ease-out 0s; transition-property: all; transition-duration: 1s; transition-timing-function: ease-out; transition-delay: 0s; } 我该如何去做呢？我对 JavaScript 或 jQuery 知之甚少，也不知道如何从它们调用事件，尤其是像这样。谢谢 JQuery 提供了几种可能对你有帮助的方法。您可以使用 .css() 方法手动设置 CSS，或者使用 .addClass() 和 .removeClass() 将 CSS 类动态应用到元素（这是我的首选方式）方法，对用户事件（例如鼠标悬停等）做出反应。注意：这是特别针对您的问题提出的问题的 jQuery 解决方案。在jQuery中，您可以使用addClass和removeClass函数。将所有 css 保留在 css 文件中，然后只需更改每个元素的类即可。 http://api.jquery.com/addclass/ 您需要使用要应用的样式创建一个 CSS 类： .rollover { /* your styles here */ } 以及一些 jQuery，当鼠标悬停在 beaconContainer 上时启用您的样式： $('article.portfolio-item.web').each(function(index, articleElem) { var article = $(articleElem); var image = article.find('img'); var container = article.find('.beaconContainer'); container.mouseover(function() { image.addClass("rollover"); }); container.mouseout(function() { image.removeClass("rollover"); }); }); 如果页面上有多篇文章，它也将起作用。您可以创建 CSS 类，然后在鼠标悬停时将其添加到容器中，然后在鼠标移出时删除该类： $('.beaconContainer img').hover(function(){ $( this ).addClass(cssClassName); }, function() { $( this ).removeClass(cssClassName); } );

javascript jquery function css onmouseover

回答 4 投票 0

Javascript 动态表，每个单元格都有一个 onmouse 事件？

我使用Javascript创建了一个动态表。现在我想做的是对于动态生成的每个单元格，有一个 onmouseover 事件会更改该特定单元格的

javascript google-chrome dom onmouseover

回答 3 投票 0

MouseHover 不适用于 OnMouseOver 方法

在我的 Unity 游戏中，当鼠标经过它时，我必须在网格中的单元格上方生成一个精灵。我尝试过使用 OnMouseOver 方法和 BoxCollider2D，但它不起作用。这是我的本...

c# unity-game-engine grid onmouseover mousehover

回答 1 投票 0

如何在on("mouseenter") 2秒后延迟？

这是我的代码。在第4行中，我想在鼠标进入lastItemsLink 2秒后运行this.openList。我怎样才能做到这一点？ lastItemsLink = $(".last-items"), 打开最后一个项目列表 = { 初始化：