এর বিপরীতটি কী: হোভার (মাউসের ছুটিতে)?

Question

:hover কেবল সিএসএস ব্যবহারের বিপরীত করার কোনও উপায় আছে কি ? হিসাবে হিসাবে: যদি :hoverহয় on Mouse Enter, একটি সিএসএস সমতুল্য আছে on Mouse Leave?

উদাহরণ:

তালিকার আইটেমগুলি ব্যবহার করে আমার একটি HTML মেনু রয়েছে। আমি যখন আইটেমগুলির মধ্যে একটি হোভার করি, সেখানে থেকে সিএসএস রঙের অ্যানিমেশন #999থাকে black। আমি উল্টো প্রভাব কিভাবে তৈরি করতে পারেন যখন থেকে একটি অ্যানিমেশন সঙ্গে মাউস পাতার আইটেমটি এলাকা, blackথেকে #999?

jsFiddle

(মনে রাখবেন যে আমি কেবল এই উদাহরণটির উত্তর দিতে চাই না, তবে পুরো "বিপরীতে :hover" ইস্যুটি প্রকাশ করতে চাই))

Comments

আপনি ঠিক কি করতে চেষ্টা করছেন? অন্য কোন বিকল্প হতে পারে?

— জামান

এর বিপরীতটি :hoverবেশ সহজভাবে :not(:hover); তবে :hoverহয় না সঙ্গে সমার্থক onmouseenterনা হয় :not(:hover)হিসাবে একই onmouseleave। সিএসএসের ডিওএম ইভেন্টগুলির কোনও ধারণা নেই।

— বোল্টক্লক

@ চথুলহু: :hoverসহজভাবে বোঝানো হয়েছে "এমন একটি উপাদান যার উপরে মাউস পয়েন্টার রয়েছে"। মাউস পয়েন্টারটি অন্য উপাদান থেকে এই উপাদানটিতে স্থানান্তরিত করে কিনা তা নির্দেশ করে না। এর অর্থ হ'ল মাউস পয়েন্টারটি বর্তমানে উপাদানটিতে রয়েছে।

— বোল্টক্লক

@ বলটকলক হবে: না (: হোভার) আসলে কিছুতেই ট্রিগার হতে পারে?

— জামান

@ মoinন জামান: হ্যাঁ। যতক্ষণ না আপনার মাউস নির্দিষ্ট উপাদানগুলির উপরে না থাকে ততক্ষণ :not(:hover)তা প্রয়োগ করা হবে। এখানে একটি ডেমো রয়েছে: jsfiddle.net/BoltClock/rghBX

— বোল্টক্লক

Answer 1

যদি আমি সঠিকভাবে বুঝতে পারি তবে আপনি হোভার স্টেটের পরিবর্তে লিঙ্কে স্থানান্তরিত করে একই জিনিসটি করতে পারেন:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

হোভার সংজ্ঞা:

: হোভার নির্বাচনকারী উপাদান নির্বাচন করার জন্য ব্যবহৃত হয় যখন আপনি তাদের উপর মাউস রাখেন।

যে সংজ্ঞা দ্বারা হোভার বিপরীত যে কোনো স্থানে এ মাউস হয় না এটি উপর। আমার চেয়ে বেশি স্মার্ট কেউ এই নিবন্ধটি করেছেন, উভয় রাজ্যেই বিভিন্ন রূপান্তর স্থাপন করেছেন - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Comments

"(মনে রাখবেন যে আমি কেবল এই উদাহরণটির উত্তর দিতে চাই না, তবে পুরো" বিপরীতে: হোভার "ইস্যুটি।)"

— চতুহুল

@ চথুলহু - আমি এখন আমার উত্তর সম্পাদনা করেছি। এটি আরও কিছুটা সাহায্য করতে পারে। আমি ভেবেছিলাম এটি খুব সুস্পষ্ট উত্তর ছিল।

— স্পেসবিয়ার্স

আমাকে সঠিক দিকে নির্দেশ করার জন্য +1। আমার ব্রাউজারগুলির মধ্যে একটি অ্যানিমেশন তাত্পর্য ছিল। ক্রোম সব কিছু মসৃণভাবে রেন্ডার করছিল তবে আমার কাছে রূপান্তরগুলিতে একটি .1 গুলি আলাদা ছিল এবং মোজিলা এবং আইই উভয়ই ত্রুটিটি প্রদর্শন করছে। আমি আমার ট্রানজিশন নম্বর মেলে এটি ঠিক করতে সক্ষম হয়েছি।

— টার্মটো

বিতৃষ্ণা। :hoverআপনার উদ্ধৃত 'সংজ্ঞা' ডাব্লু 3 স্কুল থেকে এসেছে, যারা কোনওভাবেই কোনও অনুমোদনযোগ্য উত্স নয়। প্রকৃত অনুমানটি w3.org/TR/CSS21/selector.html#dynamic-pseudo- ক্লাসে পাওয়া যাবে , যদিও এটি সর্বাধিক অ্যাক্সেসযোগ্য ব্যাখ্যা নয়।

— মার্ক আমেরিকা

Answer 2

অ্যানিমেশনগুলির পরিবর্তে সিএসএস স্থানান্তরগুলি ব্যবহার করুন ।

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

সরাসরি নমুনা

Comments

যেমন আমি উদাহরণে বলেছি, আমার সমস্যাটি অ্যানিমেশন দিয়ে নয়, তবে "মাউস ছাড়ুন" অংশ নিয়ে।

— চিতুলহু

রূপান্তর মাউস ওভার এবং মাউস ছুটিতে উভয়ই কাজ করে। এটি সাধারণ রাষ্ট্র এবং :hoverরাজ্যের জন্য শৈলী নির্দিষ্ট করতে যথেষ্ট ।

— মারাত তানালিন

Answer 3

সিএসএসে মাউস ছাড়ার সুস্পষ্ট সম্পত্তি নেই।

আপনি ব্যবহার করতে পারেন: এই প্রভাবটি অর্জনের জন্য প্রশ্নে থাকা আইটেমটি বাদে অন্য সমস্ত উপাদানগুলিতে ঘুরে দেখুন। তবে আমি নিশ্চিত না যে এটি কতটা কার্যকর হবে।

আমি মনে করি আপনাকে একটি জেএস / জিকুয়েরি সমাধান দেখতে হবে।

Comments

এই ক্ষেত্রে জেএস প্রয়োজন হয় না, এবং আমি এখন এটিকে নিরুৎসাহিত করব, যদিও পারফরম্যান্সের ন্যায়সঙ্গততা রয়েছে।

— অ্যালেক্স চেম্বারলাইন

এটি উপরের উদাহরণের জন্য প্রয়োজন নেই, তবে এটি পুরো "মাউস ছাড়ুন" সমস্যার জন্য সেরা সমাধান বলে মনে হচ্ছে।

— চিতুলহু

Answer 4

আপনি CSS3 রূপান্তর ব্যবহার করতে পারেন

কিছু ভাল লিঙ্ক:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Answer 5

যদিও এখানে উত্তরগুলি যথেষ্ট, তবে আমি সত্যিই এই বিষয়টির উপর ডাব্লু 3 স্কুলগুলির উদাহরণটি খুব সহজবোধ্য বলে মনে করি (এটি অবিলম্বে (আমার জন্য) বিভ্রান্তি পরিষ্কার করেছে)।

:hoverআপনি যখন মাউসটি উপরে নিয়ে যান তখন বাটনটির স্টাইল পরিবর্তন করতে নির্বাচকটি ব্যবহার করুন ।

টিপ: "হোভার" প্রভাবের গতি নির্ধারণ করতে রূপান্তর-সময়কালের সম্পত্তিটি ব্যবহার করুন:

উদাহরণ

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

সংক্ষেপে বলা যায়, ট্রানজিশন যেখানে আপনি "লিখুন" এবং "প্রস্থান" অ্যানিমেশন একই হতে চান, আপনি চাকরী ট্রানজিশন প্রধান নির্বাচক দরকার .buttonহোভার নির্বাচক বদলে .button:hover। রূপান্তরের জন্য যেখানে আপনি "প্রবেশ" এবং "প্রস্থান" অ্যানিমেশনগুলি আলাদা হতে চান, আপনার আলাদা আলাদা প্রধান নির্বাচক নির্দিষ্ট করতে হবে এবং নির্বাচকদের ট্রানজিশনগুলি হোভার করতে হবে।

Answer 6

নন-হোভার নির্বাচনে আপনার সময়কাল সময় দিন:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Answer 7

আপনি যে উপাদানটির সাথে গণ্ডগোল করছেন সেটিতে কেবল একটি স্থানান্তর যুক্ত করুন। সাবধান থাকুন যে পৃষ্ঠাটি লোড হওয়ার পরে কিছু প্রভাব থাকতে পারে। আপনি যদি কোনও সীমানা ব্যাসার্ধ পরিবর্তন করেন তবে ডোম লোড হয়ে গেলে আপনি এটি দেখতে পাবেন।

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Answer 8

আপনি ভুল বুঝেছেন :hover; এটি বলে যে মাউসটি কেবল একটি আইটেমের ওপরে গেছে, মাউসটি কেবল আইটেমটি প্রবেশ করেছে।

আপনি চাইলে :hoverপ্রভাবটি না পেয়ে আপনি নির্বাচকটিতে অ্যানিমেশন যুক্ত করতে পারেন।

ট্রানজিশনগুলি আরও ভাল বিকল্প: http://jsfiddle.net/Cvx96/

Comments

আপনার ফিডাল উদ্দেশ্যযুক্ত ফলাফল উত্পাদন করে না।

— গোবিন্দ রায়

Answer 9

এর বিপরীতটি :hoverদেখা যাচ্ছে :link।

(সম্পাদনা: না টেকনিক্যালি একটি বিপরীত কারণ 4 নির্বাচকরা হয় :link, :visited, :hoverএবং :activeপাঁচ যদি আপনি অন্তর্ভুক্ত। :focus।)

উদাহরণস্বরূপ যখন .button:hover{ text-decoration:none }কোনও বোতামের আন্ডারলাইন সরানোর জন্য কোনও নিয়ম সংজ্ঞায়িত করার সময়, আপনি যখন কিছু ব্রাউজারে বোতামটি রোল করেন তখন আন্ডারলাইনটি প্রদর্শিত হয়। আমি এটি সঙ্গে স্থির করেছি.button:hover, .button:link{ text-decoration:none }

এটি অবশ্যই কেবল সেই উপাদানগুলির জন্য কাজ করে যা আসলে লিঙ্কগুলি (href বৈশিষ্ট্যযুক্ত)

Comments

আপনার তথ্যটি ভুল। :linkঠিক তত সহজ লিঙ্কগুলি নির্বাচন করে। এখানে সংজ্ঞাটি দেখুন :link: বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

@ স্ট্রাইভ 55 আহ্হ, ধন্যবাদ, এটি উপলব্ধি করে। আপনি যে লিঙ্কটি দিয়েছেন তাতে বলা হয়েছে যে "লিঙ্কগুলি যথাযথভাবে শৈলীর জন্য, আপনাকে LVHA- ক্রম দ্বারা সংজ্ঞায়িত করা হয়েছে: লিঙ্ক নিয়মটি অন্যগুলির আগে রাখতে হবে: লিঙ্ক -: পরিদর্শন করা:: হোভার -: সক্রিয়"। যদি আমি এটি সঠিকভাবে বুঝতে পারি তবে এর অর্থ হ'ল যদি অন্য নির্বাচকগুলির মধ্যে কেউ আবেদন না করে (: পরিদর্শন করা:: হোভার, বা: সক্রিয়) তবে: লিঙ্কটিই প্রযোজ্য। প্রযুক্তিগতভাবে বিপরীতে নয়, কারণ সেখানে 4 রয়েছে তবে এটি এখনও কাজ করে

— স্ক্রিপ্টর

Answer 10

ক্লাস ইনিকিয়াল এ কেবলমাত্র একটি রূপান্তর এবং অ্যানিমেশনের নাম যুক্ত করুন, আপনার ক্ষেত্রে, উল লি, কেবল একটি "ট্রানজিশন" সম্পত্তি যুক্ত করুন এবং এটি আপনার প্রয়োজন

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>