javascript - 将类添加到 javascript onhover 代码-6ren

javascript - 将类添加到 javascript onhover 代码

转载作者：行者123 更新时间：2023-12-01 04:32:41

目前，我在我的页面中有一个外部脚本，它会导致 div“contact”内的文本根据悬停的“item”元素改变颜色。现在我希望不仅是“联系人 div 改变颜色，而且菜单 div 和类(class) div 以及任何其他 div，我可能想稍后添加。我尝试更改我当前的 javascript为了做到这一点，通过添加另一个 let 变量并将其包含在脚本中。但是，到目前为止，还没有任何进展。我目前正在研究我的 javascript，以便能够进行这些更改。但也许有人可以告诉我如何做到这一点是否以最干净的方式完成？

let $contact = $('#contact');


$('.item').hover(function() {
  let $target = $($(this).data('target')).toggleClass('hide_default');
  $('#contact').css('color', $target.css('color'));
});

/* Body */

* {
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}


/* Header */

#main {
  overflow: auto;
  margin-top: 25px;
  margin-bottom: 50px;
}


/* Contacts */

#contact {
  text-align: center;
  margin-bottom: 25px;
  font-size: 45px;
  font-family: 'Times New Roman';
  color: red;
  cursor: pointer;
}

#About {
  margin: 50px;
}

#container_1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 40px;
  margin-bottom: 500px;
}

#container_1>* {
  height: 10vh;
  margin: 12rem;
  position: center;
}

.hide_default {
  display: none;
}


/* Slider */

.slider {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 45px;
  float: left;
  height: 260px;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  z-index: 10001;
  left: 0;
  right: 0;
  bottom: 0;
}

.nav-bar-column-1 {
  margin-top: 100px;
  margin-bottom: 50px;
  width: 100px;
  margin-right: 160px;
  margin-left: 160px;
}

.nav-bar-column-2 {
  margin-top: 100px;
  margin-bottom: 50px;
  width: 700px;
  margin-right: 160px;
  margin-left: 160px;
}

.nav-bar-column-3 {
  margin-top: 100px;
  margin-bottom: 50px;
  width: 700px;
  margin-right: 160px;
  margin-left: 160px;
}


/* Curriculum-Div */

.Curriculum-Div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: red;
  font-size: 35px;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  z-index: 10001;
  left: 0;
  right: 0;
  bottom: 0;
}

.Curriculum-Titles {
  font-size: 45px;
}

.Sofiabordoni_Img {
  width: 400px;
}

#curriculum-column-1 {
  margin-top: 100px;
  margin-bottom: 50px;
  padding: 50px;
  width: 20%;
  margin-top: 100px;
}

#curriculum-column-2 {
  margin-top: 100px;
  margin-bottom: 50px;
  padding: 50px;
  width: 20%;
}

#curriculum-column-3 {
  margin-top: 100px;
  margin-bottom: 50px;
  padding: 50px;
  width: 20%;
}

#curriculum-column-4 {
  margin-top: 100px;
  margin-bottom: 50px;
  padding: 50px;
  width: 20%;
}

#curriculum-column-5 {
  margin-top: 100px;
  margin-bottom: 50px;
  padding: 50px;
  width: 20%;
}


/* Media-queries */

@media only screen and (max-width: 768px) {
  #main {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  #container_1 {
    justify-content: space-start;
  }
  #container_1>* {
    margin: 0rem;
    justify-content: space-start;
    margin-bottom: 500px;
    margin-bottom: 500px;
  }
  #contact {
    text-align: left;
    font-size: 20px;
    margin-top: 25px;
    margin-left: 5px;
    width: 75%;
  }
  .Image {
    width: 400px;
  }
  /* Media-queries fo Slider  */
  .slider {
    font-size: 20px;
    height: 100px;
    padding-bottom: 20px;
  }
  .nav-bar-column-1 {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .nav-bar-column-2 {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .nav-bar-column-3 {
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }
  /* Media-queries fo curriculum */
  .Curriculum-Div {
    flex-direction: column;
    height: 650px;
    overflow: auto;
    font-size: 15px;
  }
  .Sofiabordoni_Img {
    width: 100%;
  }
  .Curriculum-Titles {
    font-size: 20px;
  }
  #curriculum-column-1 {
    margin-top: 60px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding: 5px;
    width: 90%;
  }
  #curriculum-column-2 {
    padding: 5px;
    width: 80%;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 2px;
  }
  #curriculum-column-3 {
    padding: 5px;
    width: 80%;
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 20px;
  }
  #curriculum-column-4 {
    padding: 5px;
    width: 80%;
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 20px;
  }
  #curriculum-column-5 {
    padding: 5px;
    width: 80%;
    margin-left: 20px;
    margin-top: 2px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Sofia Bordoni</title>

  <link rel="stylesheet" type="text/css" href="stylesheet.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>


  <div id="main">

    <div id="contact">
      Sofia Bordoni
      <br> sofiabordoni@gmail.com &nbsp;&nbsp; 0045&nbsp;9164&nbsp;6938 &nbsp;&nbsp;
      <span class="item item-1">
						               About
				   				</span>
    </div>



    <div id="container_1">

      <div class="item item-2" data-target="#text_2">
        <img class="Image" src="Images/310500_Normann_Copenhagen_Snooze_Bed_Linen_Deep_Sleep_White_Eclat_Cushion_33x60cm_Rose_Multi.jpg" width="300px">
      </div>

      <div class="item item-3" data-target="#text_3">
        <img class="Image" src="Images/Christmas Candle 20191-kopi kopi.png" width="400px">
      </div>

      <div class="item item-4" data-target="#text_4">
        <img class="Image" src="Images/Happy-New-Year-NC.gif" width="650px">
      </div>

      <div class="item item-5" data-target="#text_5">
        <img class="Image" src="Images/Normann-Anniversary-Cover_HomePage.jpg" width="450px">
      </div>

      <div class="item item-6" data-target="#text_6">
        <img class="Image" src="Images/Skærmbillede 2020-05-08 kl. 10.16.16 kopi.png" width="300px">
      </div>

      <div class="item item-7" data-target="#text_7">
        <img class="Image" src="Images/Tivoli.png" width="350px">
      </div>

      <div class="item item-8" data-target="#text_8">
        <img class="Image" src="Images/Ren.gif" width="600px">
      </div>

      <div class="item item-9" data-target="#text_9">
        <img class="Image" src="Images/6205_Normann_Copenhagen_Imprint_Towel_70x140cm_Group_01.jpg" width="350px">
      </div>

      <div class="item item-10" data-target="#text_10">
        <img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.jpg" width="400px">
      </div>

      <div class="item item-11" data-target="#text_11">
        <img class="Image" src="Images/Holiday_Greeting_Main_NY.gif" width="650px">
      </div>

      <div class="item item-12" data-target="#text_12">
        <img class="Image" src="Images/Safari PSD Mockup_3.jpg" width="450px">
      </div>

      <div class="item item-13" data-target="#text_13">
        <img class="Image" src="Images/Asano Nielsen Design - Color Red.png" width="350px">
      </div>

      <div class="item item-14" data-target="#text_14">
        <img class="Image" src="Images/Papa-Blanket.gif" width="600px">
      </div>

      <div class="item item-15" data-target="#text_15">
        <img class="Image" src="Images/poster_mockup_MD1-kopi 3.jpg" width="350px">
      </div>

      <div class="item item-16" data-target="#text_16">
        <img class="Image" src="Images/Dizionari_DROGHERIA_CREATIVA_BAGLIONI.png" width="370px">
      </div>

      <div class="item item-17" data-target="#text_17">
        <img class="Image" src="Images/Skærmbillede 2020-05-07 kl. 19.17.28 kopi.png" width="380px">
      </div>

      <div class="item item-18" data-target="#text_18">
        <img class="Image" src="Images/Skærmbillede 2020-05-07 kl. 19.15.01 kopi.png" width="380px">
      </div>

      <div class="item item-19" data-target="#text_19">
        <img class="Image" src="Images/milano4you.png" width="450px">
      </div>

      <div class="item item-20" data-target="#text_20">
        <img class="Image" src="Images/Skærmbillede 2020-05-07 kl. 19.13.53 kopi.png" width="290px">
      </div>

      <div class="item item-21" data-target="#text_21">
        <img class="Image" src="Images/grido_leggero-kopi 3.jpg" width="420px">
      </div>

    </div>
  </div>

  <div class="slider">


    <div class="nav-bar-column-1">

      <div id="Menu">
        Menu:
      </div>
    </div>


    <div class="nav-bar-column-2">


      <div id="text_2" class="hide_default" style="color: #26e08c">
        Category:&nbsp;
        <em class="color--category">
												Textile design
											</em>
      </div>


      <div id="text_3" class="hide_default" style="color: #ff6699">
        Category:&nbsp;
        <em class="color--category">
												Objects
											</em>
      </div>


      <div id="text_4" class="hide_default" style="color: #00cc66">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_5" class="hide_default" style="color: #33cc33">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_6" class="hide_default" style="color: #9966ff">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_7" class="hide_default" style="color:#e06726">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_8" class="hide_default" style="color: #3399ff">
        Category:&nbsp;
        <em class="color--category">
												Textile design
												</em>
      </div>

      <div id="text_9" class="hide_default" style="color: #00cc99">
        Category:&nbsp;
        <em class="color--category">
												Textile design
												</em>
      </div>

      <div id="text_10" class="hide_default" style="color: #ff9900">
        Category:&nbsp;
        <em class="color--category">
												Object
												</em>
      </div>

      <div id="text_11" class="hide_default" style="color: #3366ff">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_12" class="hide_default" style="color:#5fe39f">
        Category:&nbsp;
        <em class="color--category">
												Webdesign
												</em>
      </div>

      <div id="text_13" class="hide_default" style="color: #056bfa">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_14" class="hide_default" style="color: #e026b8">
        Category:&nbsp;
        <em class="color--category">
												Textile design
												</em>
      </div>

      <div id="text_15" class="hide_default" style="color: #e35f98">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_16" class="hide_default" style="color: #32a852">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_17" class="hide_default" style="color: #4287f5">
        Category:&nbsp;
        <em class="color--category">
												Branding
												</em>
      </div>

      <div id="text_18" class="hide_default" style="color: #63f542">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_19" class="hide_default" style="color: #9942f5">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_20" class="hide_default" style="color: #e02626">
        Category:&nbsp;
        <em class="color--category">
												Editorial
												</em>
      </div>

      <div id="text_21" class="hide_default" style="color: #e026b8">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>
    </div>


    <div class="nav-bar-column-3">

      <div id="text_2-2" class="hide_default" style="color: #26e08c">
        Project:&nbsp;
        <em class="color--category">
												Bed Linen - Mood
												</em>
      </div>

      <div id="text_3-2" class="hide_default" style="color: #ff6699">
        Project:&nbsp;
        <em class="color--category"> 
												Christmas Candle 2019
												</em>
      </div>

      <div id="text_4-2" class="hide_default" style="color: #00cc66">
        Project:&nbsp;
        <em class="color--category">
												Christmas Campaign 2019.
												</em>
      </div>

      <div id="text_5-2" class="hide_default" style="color: #33cc33">
        Project:&nbsp;
        <em class="color--category">
												Anniversay Campaign.
												</em>
      </div>


      <div id="text_6-2" class="hide_default" style="color: #9966ff">
        Project:&nbsp;
        <em class="color--category">
												The Hyg Family Chair
												</em>
      </div>

      <div id="text_7-2" class="hide_default" style="color:#e06726">
        Project:&nbsp;
        <em class="color--category">
												Tivoli Catalogue
												</em>
      </div>

      <div id="text_8-2" class="hide_default" style="color: #3399ff">
        Project:&nbsp;
        <em class="color--category">
												The Ren Collection
												</em>
      </div>

      <div id="text_9-2" class="hide_default" style="color: #00cc99">
        Project:&nbsp;
        <em class="color--category">
												Imprint Towel
												</em>
      </div>

      <div id="text_10-2" class="hide_default" style="color: #ff9900">
        Project:&nbsp;
        <em class="color--category">
												Christmas Candle 2019
												</em>
      </div>

      <div id="text_11-2" class="hide_default" style="color: #3366ff">
        Project:&nbsp;
        <em class="color--category">
												Christmas Campaign 2019
												</em>
      </div>

      <div id="text_12-2" class="hide_default" style="color: #5fe39f">
        Project:&nbsp;
        <em class="color--category">
												Beta Factory
												</em>
      </div>

      <div id="text_13-2" class="hide_default" style="color: #056bfa">
        Project:&nbsp;
        <em class="color--category">
												Asano Nielsen Design
												</em>
      </div>

      <div id="text_14-2" class="hide_default" style="color: #e026b8">
        Project:
        <em class="color--category">
												Papa Blanket
												</em>
      </div>

      <div id="text_15-2" class="hide_default" style="color: #e35f98">
        Project:&nbsp;
        <em class="color--category">
												CAFX
												</em>
      </div>

      <div id="text_16-2" class="hide_default" style="color: #32a852">
        Project:&nbsp;
        <em class="color--category">
												Hotel Baglioni.
												</em>
      </div>

      <div id="text_17-2" class="hide_default" style="color: #4287f5">
        Project:&nbsp;
        <em class="color--category">
												Hay Kitchen Market
												</em>
      </div>

      <div id="text_18-2" class="hide_default" style="color: #63f542">
        Project:&nbsp;
        <em class="color--category">
												Varier Collection 2017
												</em>
      </div>

      <div id="text_19-2" class="hide_default" style="color: #9942f5">
        Project:&nbsp;
        <em class="color--category">
												Milano 4 You
												</em>
      </div>

      <div id="text_20-2" class="hide_default" style="color: #e02626">
        Project:&nbsp;
        <em class="color--category">
												Book series cinque + uno
												</em>
      </div>

      <div id="text_21-2" class="hide_default" style="color: #e026b8">
        Project:&nbsp;
        <em class="color--category">
												Grido Leggero
												</em>
      </div>

    </div>

  </div>


  <div class="Curriculum-Div" style="display: none;">



    <div id="curriculum-column-1">


      <img class="Sofiabordoni_Img" src="Images/Sofia.png">

      <br>
      <br> I love my childhood memories, which were filled with colors, papirs, pencils and handcraft works. I developed an obsession towards various kinds of creative fields: photography, developing analogue photos, architecture, - percieving buildings
      as shapes, volumes and combination of materials, as well as learning to look upon typography as shapes with entrenched characthers. When I realized that graphic design brought together all of these different passions of mine, I pursued it with enthusiasm.

    </div>

    <div id="curriculum-column-2">

      <em class="Curriculum-Titles">
												Education
											</em>
      <br>
      <br>
      <em>
												2013
											</em>
      <br> Scientific High School N. Tron Technology Plan
      <br>
      <br>
      <em>
												2016
											</em>
      <br> University Architecture of Venice IUAV Industrial Design and Multimedia
      <br>
      <br>
      <br>

      <em class="Curriculum-Titles">
												Interests
											</em>

      <br>
      <br> Graphic Design, Typography, Product Design, Textile, Accessories, Printing, Letterpress, Binding Architecture, Interior Design, Cultural Exhibitions, Art Photography
      <br>
      <br>
      <br>

      <em class="Curriculum-Titles">
												Collaborations
											</em>

      <br>
      <br>
      <em>
												BetaFactory / UnderBroen CPH
												</em>
      <br> Art direction / Graphic Designer <br> September 2017 – Present
      <br>
      <br>
      <em>
												Drogheria Creativa
												</em>
      <br> Art direction / Graphic Designer <br> January 2018 – January 2019 <br> Client: Baglioni Hotels <br>

    </div>

    <div id="curriculum-column-3">

      <em class="Curriculum-Titles">
													Experience
												</em>

      <br>
      <br>
      <em>
													Normann Copenhagen
													</em>
      <br> Graphic Product Designer<br> May 2018 - Present
      <br>
      <br>

      <em>
													Copenhagen Architecture Festival
													</em>
      <br> Graphic Product Designer <br> January 2018 - May 2018
      <br>
      <br>

      <em>
													Clara von Zweigberg Studio
													</em>
      <br> Graphic Designer Intern <br> Jan 2017 - July 2017 <br> Clients: HAY, Varier Furniture, Areaware
      <br>
      <br>
      <em>
													Studio FM Milano
													</em>
      <br> Graphic Designer Intern <br> Feb 2016 - July 2016 <br> Clients: Poltrona Frau, Cassina, Tecno
      <br>
      <br>
      <em>
													Studio Anagramma
													</em>
      <br> Graphic Designer Intern<br> June 2015 - Aug 2015
      <br>
      <br>
      <em>
													Università di Architettura Venezia IUAV
													</em>
      <br> Laboratory assistant <br> Feb 2015 - May 2015
      <br>
      <br>

    </div>


    <div id="curriculum-column-4">

      <em class="Curriculum-Titles">
													Competences
												</em>
      <br>
      <br>
      <em>
														Languages <br>
														</em> Italian (native), English (fluent), Danish (4th Module). <br>

      <br>
      <br>
      <em>
														Adobe Suite <br>
														</em> Indesign (expert), Illustrator (expert), Photoshop (expert), Lightroom (expert).

      <br>
      <br>
      <em>
														Operating systems <br>
														</em> Macintosh (expert), Windows (basic) <br>

      <br>
      <br>
      <em>
														Webprogramming <br>
														</em> HTML (basic), CSS (basic)

      <br>
      <br>
      <em>
														2D/3D modelling <br>
														</em> AutoCAD (basic), Rhinoceros (basic) <br>

    </div>

    <div id="curriculum-column-5">

      <em class="Curriculum-Titles">
													Workshop
													</em>
      <br>
      <br>
      <em>
														Form Us With Love / BAUX (Svezia) <br>
														</em> 16 June 2017
      <br>
      <br>

      <em>
														Touchpoint Design <br>
														</em> Left Loft / La Triennale di Milano <br> 12-13 Sept 2016
      <br>
      <br>

      <em>
														Welcome Design Workshop IUAV
														</em>
      <br> Studio FM Milano / Sergio Menichelli <br> September 2015
      <br>
      <br>
      <em>
														Schio Design Festival
														</em>
      <br> Graphic & Product Designer<br> Dec 2014 - Feb 2015
      <br>
      <br>
      <em>
														Workshop di Architettura Venezia IUAV
														</em>
      <br> Professors Paolo Merlini<br> July 2012
    </div>
  </div>

  </div>


  </div>



  </div>

  <script src="Onhover.js"></script>
  <script src="HoverColor.js"></script>
  <script src="Nav-Bar_expand.js"></script>
  <script src="MenuHide.js"></script>


  <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>

  <script>
    const myLazyLoad = new LazyLoad({
      elements_selector: ".Image"
    });
  </script>

</body>

</html>

最佳答案

您可以将 jQuery 选择器应用于多个元素，如下所示，而不是仅在 #contact 元素上应用 CCS:

$("#contact, div, span, .whateverClass").css('color', #colorYouWant);

关于javascript - 将类添加到 javascript onhover 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62043647/

文章推荐： javascript - 点击元素方式的图片

文章推荐： javascript - 在 jQuery 中添加或删除类

css - onHover 的反转动画
我正在为我的主页使用 CSS 动画。由于没有 onHover I 的对立面试过that : 但它对我来说真的不起作用。看到那个: fiddle https://jsfiddle.net/mus8sd
html - 无法更改菜单栏中的图像 "onhover"？
我必须创建一个菜单栏，其中有类似 facebook 的通知球。我遇到了不能像 Facebook 那样在悬停时更改图像的问题。那我应该得到一些适当的解决方案吗？我的代码如下: #noti_Contain
jquery - onHover 字体颜色不变
我有一个输入框，当用户开始输入时，它会显示一个 div，其中包含他们可以选择的可能俱乐部列表。我现在只是想给它添加一些样式，但我的 .clubLink:hover 类有问题。 CSS: .
Javascript onHover 事件
是否有一种规范的方法可以使用现有的 onmouseover、onmouseout 和某种计时器来设置 JS onHover 事件？或者当且仅当用户将鼠标悬停在元素上一定时间时才触发任意函数的任何方法。
reactjs - 测试工具提示的 onHover 事件
我正在使用 React 测试库来测试这个组件: export default class A extends React.Component { constructor(props) {
如果鼠标移动太快，SwiftUI onHover 不会注册鼠标离开元素
我在 SwiftUI 中制作了一些自定义 slider View ，它们根据悬停状态更改外观，但是如果鼠标移出太快(这实际上是移动光标的非常合理的速度)，它会保持悬停状态，直到您重新-缓慢悬停并重新离
javascript - 如何只改变一个元素 onHover (ReactJS)
所以我试图通过改变状态来改变悬停时的元素颜色，问题是所有元素都会因为状态而改变。如何做到只有一个元素会改变？问题链接: https://repl.it/@RokasSimkus/TediousTes
swift - 如何获取自定义形状的 .onHover(...) 事件
假设您有一个圆圈。当您将鼠标悬停在圆圈内时如何更改其颜色？我试过了 struct ContentView: View { @State var hovered = false var
html - Bootstrap onhover 用于多级菜单
我正在尝试实现由“悬停”触发的多级 Bootstrap 菜单。第一级工作得很好。然而，对于更深层次的菜单，菜单将所有内容都显示为“可见”。需要自定义 CSS 的帮助，以便悬停功能正常工作并仅显示所需的
Javascript div onhover 增量计数
我有几个 div。每个div都有一个唯一的id。这是 div 的: Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 Box 7 Box 8 Box 9 这是数据外观的示例。
html - 如何在没有第二张图片的情况下完成 onHover 事件
我正在访问这个网站: http://vsearch.nlm.nih.gov/vivisimo/cgi-bin/query-meta?v:project=medlineplus&query= 我遇到了“
Flutter - 墨水池 : Why does onHover() require onTap()?
我使用以下代码: Widget getSelectSortBy() { return InkWell( onHover: (value) { setSt
SVG 标记 onHover 事件(图表)
我正在构建自己的折线图，想知道如何制作悬停时线交互。例如(简化): 当用户悬停在 5,10 上时，我将如何执行悬停事件或 10,20并显示还是只是一般的命令？有什么我遗漏的吗，或者我必须检测鼠
css - 更改 CSS :onhover distance
我想知道是否有办法让 css :onhover 发生得更快(即我距离链接 10px，并且 :onhover 调用，同时仍然10 像素远)。编辑:我正在尝试找出一种方法来更改滚动条的 :onhover
html - ReactMapGL 上的 onHover 效果无法正确缩放
目前我正在尝试在我的 map 组件上复制此网站的悬停效果:http://www.francoisrisoud.com/projects基本上，当您将鼠标悬停在一个点上时，它会显示一个全屏图像，当您单击
javascript - 尝试从 onclick 更改为 onhover
所以我在网站顶部有一个菜单，其中有一些下拉菜单。下拉菜单是显示 onclick 的脚本，我想更改它们以在将鼠标悬停在其上时触发事件。我相信这是它的脚本: http://babblespot.com/
javascript - 将类添加到 javascript onhover 代码
目前，我在我的页面中有一个外部脚本，它会导致 div“contact”内的文本根据悬停的“item”元素改变颜色。现在我希望不仅是“联系人 div 改变颜色，而且菜单 div 和类(class) di
Javascript - JQuery - OnHover NOT OnClick - 修改插件
如果你看右边，有一个缩略图库。我需要将操作从“点击”更改为“悬停”。我不是 javascript 开发人员，此时更改脚本将是徒劳的(修改这个脚本需要花费太多时间...出于其他原因)。如果您能帮我找到
javascript - jQuery - 将 onHover 处理程序添加到区域元素
如何使用 jQuery 选择区域元素？当鼠标悬停在区域元素上时，我需要更改隐藏的 div 元素上的 CSS。我无法使用 CSS 来完成此操作，因为区域元素不受 CSS 影响。 jQuery: (fun
javascript - 应用样式 onHover 和 onClick
我想要 onHover 和 onClick 效果。寻找具有专业 CSS 样式的简洁优雅的解决方案。要求:悬停在上述任何元素上时，我想用灰色背景框包围元素。和 onclick 我想用一个背景颜色作为

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将类添加到 javascript onhover 代码