পটভূমির রঙের রূপান্তর

Question

আমি background-colorমেনু আইটেমগুলি ঘোরার সাথে সাথে একটি রূপান্তর প্রভাব তৈরি করার চেষ্টা করছি , তবে এটি কার্যকর হয় না। এখানে আমার সিএসএস কোডটি রয়েছে:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

#nav divএকটি মেনু হয় ulআইটেম তালিকা।

Comments

শুধু এফওয়াইআই, এটি এখন ফায়ারফক্সে কাজ করে। এফএফ 9 তে পরীক্ষিত।

— সি ব্রাউন

Answer 1

যতদূর আমি জানি, স্থানান্তরগুলি বর্তমানে সাফারি, ক্রোম, ফায়ারফক্স, অপেরা এবং ইন্টারনেট এক্সপ্লোরার 10+ এ কাজ করে।

এটি এই ব্রাউজারগুলিতে আপনার জন্য বিবর্ণ প্রভাব তৈরি করবে:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<a>Navigation Link</a>

দ্রষ্টব্য: মন্তব্যগুলিতে জেরাল্ডের নির্দেশ অনুসারে, আপনি যদি রূপান্তরটির উপরে রাখেন a, পরিবর্তে a:hoverএটির পরিবর্তে আসল রঙে ম্লান হয়ে যাবে যখন আপনার মাউস লিঙ্কটি থেকে দূরে সরে যাবে।

এটি কার্যকরও হতে পারে: সিএসএস ফান্ডামেন্টালস: সিএসএস 3 ট্রানজিশন

Comments

আপনি content #nav aযখন লিঙ্কটি থেকে মাউসটিকে সরিয়ে ফেলেন তখন আপনি মূলটিতে ফিকে হয়ে যাওয়ার জন্য রূপান্তরগুলিতেও রাখতে পারেন ।

— gak

সঙ্গে বেহালার হোভার এবং ক্লিক এ ট্রানজিশন: jsfiddle.net/K5Qyx

— ডেমোক্রাটিক Pilafian

এটিকে transition:নন-হোভারে রাখাই কি ভাল হয় না ? আমি মনে করি যে প্রতিবার ব্যবহারকারী ঘুরে বেড়ানোর সময়, রূপান্তরটি সংকলিত হয়েছে ..

— মতেজ

@ ইলিয়াম লিঙ্কটি মারা গেছে

— ফেরিডেনেটর

সিএসএস transitionআপাতদৃষ্টিতে ধরণের "লিনিয়ার-গ্রেডিয়েন্ট" এর রঙটি হ্যান্ডেল করতে পারে না কারণ এখানে পরীক্ষা করা যেতে পারে । এবং বিটিডব্লিউ, @ ইলিয়ামের উত্তরটি সমাধান হিসাবে চিহ্নিত হওয়ার উপযুক্ত।

— স্ট্যাকি

Answer 2

আমার কাছে, মূল / ন্যূনতম নির্বাচকগুলির সাথে: হোভার বা অন্য কোনও অতিরিক্ত নির্বাচকের সাথে সংক্রমণের কোডগুলি রাখাই ভাল:

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

Comments

এটি এটি আরও ভাল বা খারাপ নয়। এটি ঠিক যে যদি আপনি ক্ষতির উপরেই রূপান্তরটি নির্দিষ্ট করে থাকেন, যখন উপাদানটি আড়াল হয়ে যায় এবং যখন এটি "আন-আওয়ারড" হয়ে যায় তখন এটি অ্যানিমেটেড হবে। আপনি যদি এটিটিকে: হোভারটিতে প্রয়োগ করেন তবে মাউস প্রবেশ করার সময় আপনার একটি অ্যানিমেশন থাকবে, কিন্তু যখন এটি চলে যাবে তখন নয়।

— লুকাসবিফ

এই সমাধান সামগ্রিকভাবে ভাল। স্থানান্তরের প্রভাবটি হোভারের সাথে ম্লান হয়ে যাওয়া এবং অস্পষ্ট হয়ে যাওয়ার আশা করা উচিত।

— শীতল